# Titanium.UI.Animation > The `Animation` object defines an animation that can be applied to a view. - Source: https://titaniumsdk.com/docs/sdk/12.8.0/Titanium.UI.Animation - Titanium SDK version: 12.8.0 - Kind: proxy - Platforms: Android, iPhone, iPad, macOS - Since: Titanium SDK 0.9 - Extends: Titanium.Proxy - Inheritance: Titanium.Proxy An animation object describes the properties of an animation. At its most basic, an animation object represents a single-phase animation with an end state and a duration. When [animate](https://titaniumsdk.com/docs/sdk/Titanium.UI.View.md#animate) is called on a [View](https://titaniumsdk.com/docs/sdk/Titanium.UI.View.md), the view is animated from its current state to the state described by the animation object. The properties that can be animated include the view's position, size, colors, transformation matrix and opacity. You can also specify an animation curve or *easing function* to control the pace of the animation. To use an easing function, set the animation's `curve` property to one of the `ANIMATION_CURVE` constants defined in [Titanium.UI](https://titaniumsdk.com/docs/sdk/Titanium.UI.md). For example, [ANIMATION_CURVE_EASE_IN](https://titaniumsdk.com/docs/sdk/Titanium.UI.md#ANIMATION_CURVE_EASE_IN) specifies an animation that starts slowly and then speeds up. Animations can be set to reverse themselves automatically on completion, and to repeat a given number of times. For more complicated effects, multiple animations can be combined in sequence, starting one animation when the previous animation completes. Use the [Titanium.UI.createAnimation](https://titaniumsdk.com/docs/sdk/Titanium.UI.md#createAnimation) method to create an animation object. Note that on SDKs older than 9.1.0, when you animate a view's size or position the actual layout properties (such as `top`, `left`, `width`, `height`) are not changed by the animation. See the description of the [animate](https://titaniumsdk.com/docs/sdk/Titanium.UI.View.md#animate) method for more information. As of 9.1.0, the animated properties should reflect their final values just before the `complete` event and/or the [Ti.UI.View.animate](https://titaniumsdk.com/docs/sdk/Titanium.UI.View.md#animate) callback is fired. #### iOS Platform Notes iOS supports both 2D and 3D matrix transformations in animations. iOS also supports *transitions* between windows or views. You can create a transition by creating an animation object and setting the `view` property to the view you want to transition to. The `transition` property specifies the transition effect to apply. Use one of the transition style constants defined in [Titanium.UI.iOS.AnimationStyle](https://titaniumsdk.com/docs/sdk/Titanium.UI.iOS.AnimationStyle.md). #### Android Platform Notes Android supports 2D matrix transformations. Note that the [Matrix2D.rotate](https://titaniumsdk.com/docs/sdk/Titanium.UI.Matrix2D.md#rotate) method operates differently on Android. Called with a single argument, it rotates from zero to the specified angle. That is, it ignores any existing rotation. Called with two arguments, it interprets the first argument as a "from" angle and the second argument as a "to" angle. ## Example: Simple Animation Applied to a View Create a simple animation and apply it to the view. In this example, the view will animate from red to black to orange over 2 seconds. ``` js var view = Titanium.UI.createView({ backgroundColor:'red' }); var animation = Titanium.UI.createAnimation(); animation.backgroundColor = 'black'; animation.duration = 1000; var animationHandler = function() { animation.removeEventListener('complete',animationHandler); animation.backgroundColor = 'orange'; view.animate(animation); }; animation.addEventListener('complete',animationHandler); view.animate(animation); ``` ## Example: Animation Using Matrix Transforms The following example uses a transformation matrix to animate a view when the view is clicked. The animation rotates and scales the view, then returns it to its original size and position. The entire animation is repeated three times. ``` js var box = Ti.UI.createView({ backgroundColor : 'red', height : '100', width : '100' }); win.add(box); box.addEventListener('click', function() { var matrix = Ti.UI.createMatrix2D(); matrix = matrix.rotate(180); matrix = matrix.scale(2, 2); var a = Ti.UI.createAnimation({ transform : matrix, duration : 2000, autoreverse : true, repeat : 3 }); box.animate(a); }); win.add(box); ``` ## Example: Using an anchorPoint (Android and iOS) Create a button and a blue square view. For each click of the button, apply a 90 degree rotation animation pivoted at one of a series of anchor points. In particular, note that an anchor point is configured using the property for Android and the property for iOS. ``` js var animationType = [ { name: 'Top Left', anchorPoint: {x:0, y:0} }, { name: 'Top Right', anchorPoint: {x:1, y:0} }, { name: 'Bottom Left', anchorPoint: {x:0, y:1} }, { name: 'Bottom Right', anchorPoint: {x:1, y:1} }, { name: 'Center', anchorPoint: {x:0.5, y:0.5} } ]; var animationTypeLength = animationType.length; var animationCount = 0; var animationTypePointer = 0; var t = Ti.UI.createMatrix2D(); t = t.rotate(90); // animation properties var a = { transform: t, duration: 2000, autoreverse: true }; Ti.UI.backgroundColor = 'white'; var win = Ti.UI.createWindow(); var view = Ti.UI.createView({ backgroundColor:'#336699', width:100, height:100 }); win.add(view); var button = Ti.UI.createButton({ title:'Animate ' + animationType[animationTypePointer].name, height: (Ti.UI.Android) ? 80 : 40, width: (Ti.UI.Android) ? 300 : 200, top:30 }); win.add(button); function updateButton(name){ button.title = 'Animate ' + name; } button.addEventListener('click', function(){ // set new anchorPoint on animation for Android a.anchorPoint = animationType[animationTypePointer].anchorPoint; // set new anchorPoint on view for iOS view.anchorPoint = animationType[animationTypePointer].anchorPoint; animationCount++; // determine position of next object in animationType array or return to first item // using modulus operator animationTypePointer = animationCount % animationTypeLength; // animate view, followed by callback to set next button title view.animate(a, function(){ updateButton(animationType[animationTypePointer].name); }); }); win.open(); ``` ## Properties ### anchorPoint - Type: Point - Platforms: Android Coordinate of the view about which to pivot an animation. Used on Android only. For iOS, use [Titanium.UI.View.anchorPoint](https://titaniumsdk.com/docs/sdk/Titanium.UI.View.md#anchorPoint). Anchor point is specified as a fraction of the view's size. For example, `{0, 0}` is at the view's top-left corner, `{0.5, 0.5}` at its center and `{1, 1}` at its bottom-right corner. This property's value will overwrite the [anchorPoint](https://titaniumsdk.com/docs/sdk/Matrix2DCreationDict.md#anchorPoint) used in the matrix's creation dictionary. See the "Using an anchorPoint" example for a demonstration. ### autoreverse - Type: Boolean - Platforms: Android, iPhone, iPad, macOS - Default: `false` Specifies if the animation should be replayed in reverse upon completion. ### backgroundColor - Type: String | Titanium.UI.Color - Platforms: Android, iPhone, iPad, macOS Value of the `backgroundColor` property at the end of the animation, as a color name or hex triplet. For information about color values, see the "Colors" section of [Titanium.UI](https://titaniumsdk.com/docs/sdk/Titanium.UI.md). ### bottom - Type: Number - Platforms: Android, iPhone, iPad, macOS Value of the `bottom` property at the end of the animation. ### bounce - Type: Number - Platforms: iPhone, iPad, macOS - Since: Titanium SDK 12.2.0 - Requires: iOS 17.0+ The animation bounce. If set, the animation uses the iOS 17+ spring animation. When `bounce` is 0, there are no bounces, positive values indicate increasing amounts of bounciness up to a maximum of 1.0 (corresponding to undamped oscillation), and negative values indicate overdamped springs with a minimum value of -1.0. ### center - Type: Point - Platforms: Android, iPhone, iPad, macOS Value of the `center` property at the end of the animation. ### color - Type: String | Titanium.UI.Color - Platforms: Android, iPhone, iPad, macOS - Since: Titanium SDK 9.1.0 Value of the `color` property at the end of the animation, as a color name or hex triplet. For information about color values, see the "Colors" section of [Titanium.UI](https://titaniumsdk.com/docs/sdk/Titanium.UI.md). ### curve - Type: Number - Platforms: Android, iPhone, iPad, macOS - Since: Titanium SDK Android 8.0.0, iPhone 0.9, iPad 0.9 Animation curve or easing function to apply to the animation. Accepts: `Titanium.UI.ANIMATION_CURVE_EASE_IN`, `Titanium.UI.ANIMATION_CURVE_EASE_IN_OUT`, `Titanium.UI.ANIMATION_CURVE_EASE_OUT`, `Titanium.UI.ANIMATION_CURVE_LINEAR` ### dampingRatio - Type: Number - Platforms: iPhone, iPad, macOS - Since: Titanium SDK 8.1.0 The damping ratio for the spring animation as it approaches its quiescent state. Use a value between 0 and 1. For a smoother deceleration use values closer to 1. To increase oscillation use value closer to 0. ### delay - Type: Number - Platforms: Android, iPhone, iPad, macOS Delay, in milliseconds before starting the animation. ### duration - Type: Number - Platforms: Android, iPhone, iPad, macOS Duration of the animation, in milliseconds. ### elevation - Type: Number - Platforms: Android - Since: Titanium SDK 9.1.0 Value of the `elevation` property at the end of the animation. ### height - Type: Number - Platforms: Android, iPhone, iPad, macOS Value of the `height` property at the end of the animation. ### left - Type: Number - Platforms: Android, iPhone, iPad, macOS Value of the `left` property at the end of the animation. ### opacity - Type: Number - Platforms: Android, iPhone, iPad, macOS Value of the `opacity` property at the end of the animation. ### opaque - Type: Boolean - Platforms: iPhone, iPad, macOS Value of the `opaque` property at the end of the animation. ### repeat - Type: Number - Platforms: Android, iPhone, iPad, macOS - Default: `1 (no repeat)` Number of times the animation should be performed. If `autoreverse` is `true`, then one repeat of the animation consists of the animation being played once forward, and once backward. ### right - Type: Number - Platforms: Android, iPhone, iPad, macOS Value of the `right` property at the end of the animation. ### rotationX - Type: Number - Platforms: Android - Since: Titanium SDK 12.2.0 Value of the `rotationX` property at the end of the animation. ### rotationY - Type: Number - Platforms: Android - Since: Titanium SDK 12.2.0 Value of the `rotationY` property at the end of the animation. ### springVelocity - Type: Number - Platforms: iPhone, iPad, macOS - Since: Titanium SDK 8.1.0 The initial spring velocity. For smooth start to the animation, match this value to the velocity of view as it was prior to attachment. A value of 1 corresponds to the total animation distance traversed in one second. For example, if the total animation distance is 200 points and you want the start of the animation to match a view velocity of 100 pt/s, use a value of 0.5. ### top - Type: Number - Platforms: Android, iPhone, iPad, macOS Value of the `top` property at the end of the animation. ### transform - Type: Titanium.UI.Matrix2D | Titanium.UI.Matrix3D - Platforms: Android, iPhone, iPad, macOS Animate the view from its current tranform to the specified transform. Over the course of the animation, the view interpolates from its current transform to the specified transform. 3D transforms are only supported on iOS. ### transition - Type: Number - Platforms: iPhone, iPad, macOS Transition type to use during a transition animation. The new view being transitioned to **should NOT** be a child of another view or of the animating view. The animation replaces the current view from the view heirarchy and adds the new view to it. Accepts: `Titanium.UI.iOS.AnimationStyle.CROSS_DISSOLVE`, `Titanium.UI.iOS.AnimationStyle.CURL_DOWN`, `Titanium.UI.iOS.AnimationStyle.CURL_UP`, `Titanium.UI.iOS.AnimationStyle.FLIP_FROM_BOTTOM`, `Titanium.UI.iOS.AnimationStyle.FLIP_FROM_LEFT`, `Titanium.UI.iOS.AnimationStyle.FLIP_FROM_RIGHT`, `Titanium.UI.iOS.AnimationStyle.FLIP_FROM_TOP`, `Titanium.UI.iOS.AnimationStyle.NONE` ### view - Type: Titanium.UI.View - Platforms: iPhone, iPad, macOS New view to transition to. Specify the `transition` property with one of the transition style constants defined in [Titanium.UI.iOS.AnimationStyle](https://titaniumsdk.com/docs/sdk/Titanium.UI.iOS.AnimationStyle.md) to select the effect to apply. The new view being transitioned to **should NOT** be a child of another view or of the animating view. The animation replaces the current view from the view heirarchy and adds the new view to it. ### visible - Type: Boolean - Platforms: iPhone, iPad, macOS Value of the `visible` property at the end of the animation. ### width - Type: Number - Platforms: Android, iPhone, iPad, macOS Value of the `width` property at the end of the animation. ### zIndex - Type: Number - Platforms: iPhone, iPad, macOS Value of the `zIndex` property at the end of the animation. Refer to [Titanium.UI.View.zIndex](https://titaniumsdk.com/docs/sdk/Titanium.UI.View.md#zIndex) for an explanation of z-index. ## Events ### cancel - Platforms: Android - Since: Titanium SDK 12.1.0 Fired when the animation is canceled. ### complete - Platforms: Android, iPhone, iPad, macOS Fired when the animation completes. ### start - Platforms: Android, iPhone, iPad, macOS Fired when the animation starts. ## Inherited members 7 members are inherited. Each is documented on the type that declares it. - [Titanium.Proxy](https://titaniumsdk.com/docs/sdk/12.8.0/Titanium.Proxy.md): `addEventListener`, `apiName`, `applyProperties`, `bubbleParent`, `fireEvent`, `lifecycleContainer`, `removeEventListener` --- - This corpus documents Titanium SDK 13.4.1. Anything here that does not name a version describes 13.4.1. - Titanium is maintained by TiDev. The Appcelerator toolchain is retired: there is no `appc` CLI, no Appcelerator Studio and no hosted build service. The supported CLI is `titanium` on npm, invoked as `ti`.