Skip to main content

The play Method

  • The play method is used to reproduce the animation for a single view or an array of views.
  • You can chain multiple Animation objects with callback functions to create a sequence of animations.
$.myAnimation.play($.myView);

play example 1​

Create an Animation element and the view you want to animate, and set the desired properties.

index.xml
<Alloy>
  <Window>
    <View id="square" class="bg-blue-500 wh-16" />
    <Animation module="purgetss.ui" id="myAnimation" class="bg-green-500 wh-32" />
  </Window>
</Alloy>

In the controller, pass the element that you want to animate - in this case, the square view.

index.js
$.index.open();

$.myAnimation.play($.square);

When the play method is called, the blue square will go from size 64x64 to 128x128 and change its color to green.

Basic Animation

* low framerate gif

open and close modifiers​

You can create more complex animations by combining properties for different states, such as when opening or closing an animation. The open and close modifiers allow you to specify these different states.

play example 2​

index.xml
<Alloy>
  <Window class="keep-screen-on">
    <View class="vertical">
      <Button class="w-48 mt-1 bg-purple-500 rounded ios:mt-16 text-purple-50" onClick="squaresFn" title="3 Squares"/>
      <Button class="w-48 mt-2 bg-purple-500 rounded text-purple-50" onClick="toggleFn" title="Toggle Colors"/>
      <Button class="w-48 mt-2 bg-purple-500 rounded text-purple-50" onClick="retweetFn" title="Toggle Re-Tweet"/>

      <View id="squaresView" class="w-screen mt-10 vertical">
        <View class="bg-blue-700 w-28 h-28 rounded-xl" />
        <View class="mt-4 bg-blue-700 w-28 h-28 rounded-xl" />
        <View class="mt-4 bg-blue-700 w-28 h-28 rounded-xl" />
      </View>
    </View>

    <View id="blueSquareView" class="mt-8 bg-blue-500 w-14 h-14 rounded-xl" onClick="transparencyFn" />

    <View id="retweetView" class="w-screen h-48 bg-gray-800 vertical -mb-52 rounded-2xl" onClick="retweetFn">
      <View class="w-8 h-1 mt-4 bg-slate-700" />

      <View class="mx-4 mt-4 horizontal">
        <Label class="text-xl text-slate-500 fas fa-retweet w-7" />
        <Label class="ml-2 text-xl text-left text-white" text="Re-Tweet" />
      </View>

      <View class="mx-4 mt-4 horizontal">
        <Label class="text-xl text-slate-500 fas fa-pencil-alt w-7" />
        <Label class="ml-2 text-xl text-left text-white" text="Quote Tweet" />
      </View>
    </View>

    <Animation id="changeWidth" class="open:w-11/12 close:w-28 debug" module="purgetss.ui" />
    <Animation id="changeColor" class="open:bg-purple-500 close:bg-blue-700 debug" module="purgetss.ui" />
    <Animation id="changeTransparency" class="open:duration-150 close:duration-300 open:mt-(null) close:mt-8 open:w-10/12 open:h-11/12 close:w-14 close:h-14 open:opacity-50 close:opacity-100" module="purgetss.ui" />
    <Animation id="changeRetweet" class="open:duration-200 close:duration-150 open:-mb-16 close:-mb-52" module="purgetss.ui" />
  </Window>
</Alloy>
index.js
function transparencyFn(e) {
  $.changeTransparency.play($.blueSquareView);
}

function toggleFn(e) {
  $.changeColor.toggle($.squaresView.children);
}

function squaresFn(e) {
  $.changeWidth.play($.squaresView.children);
}

function retweetFn(e) {
  $.changeRetweet.play($.retweetView);
}

$.index.open();

Complex Animations

* low framerate gif

complete modifier​

To apply additional properties after an open animation is finished, use the complete modifier.

complete example 1​

For example, in the following code, the open animation reduces the children of the letters view to a size of 1%. After completion, the complete modifier will set the background color to green and the scaling back to 100%.

index.xml
<Alloy>
  <Window title="App Wordle" class="bg-(#181e2d)">
    <View class="vertical">
      <View id="letters" class="horizontal">
        <Label class="w-8 h-8 mx-1 text-center text-white bg-transparent border-white rounded" text="T" />
        <Label class="w-8 h-8 mx-1 text-center text-white bg-transparent border-white rounded" text="I" />
        <Label class="w-8 h-8 mx-1 text-center text-white bg-transparent border-white rounded" text="T" />
        <Label class="w-8 h-8 mx-1 text-center text-white bg-transparent border-white rounded" text="A" />
        <Label class="w-8 h-8 mx-1 text-center text-white bg-transparent border-white rounded" text="N" />
        <Label class="w-8 h-8 mx-1 text-center text-white bg-transparent border-white rounded" text="I" />
        <Label class="w-8 h-8 mx-1 text-center text-white bg-transparent border-white rounded" text="U" />
        <Label class="w-8 h-8 mx-1 text-center text-white bg-transparent border-white rounded" text="M" />
      </View>

      <Button class="mt-4" android:onClick="doAnimate" ios:onSingletap="doAnimate">Animate</Button>
      <Button android:onClick="doReset" ios:onSingletap="doReset">Reset</Button>
    </View>

    <Animation module="purgetss.ui" id="myAnimationReset" class="bg-transparent" />
    <Animation module="purgetss.ui" id="myAnimationOpen" class="open:scale-1 complete:bg-(#008800) complete:scale-100" />
  </Window>
</Alloy>
index.js
$.index.open();

function doAnimate() {
  $.myAnimationOpen.play($.letters.children);
}

function doReset() {
  $.myAnimationReset.apply($.letters.children);
}

complete example 1

delay modifier​

To delay the start of an animation, use the delay modifier.

delay example 1​

For example, in the following code, the open animation will start after 1 second.

index.xml

index.js

childred and child modifiers​

When you want to apply an animation to a view that has children, you can use the children modifier to apply the animation to all children of the view. If you want to apply the animation to a specific child, you can use the child modifier.

childandchildren example 1​

For example, in the following code, the open animation reduces the children of the letters view to a size of 1%. After completion, the complete modifier will set the background color to green and the scaling back to 100%.

index.xml
<Alloy>
  <Window title="App Wordle" class="bg-(#181e2d)">
    <View class="vertical">
      <View id="letters" class="horizontal">
        <Label class="w-8 h-8 mx-1 text-center text-white bg-transparent border-white rounded" text="T" />
        <Label class="w-8 h-8 mx-1 text-center text-white bg-transparent border-white rounded" text="I" />
        <Label class="w-8 h-8 mx-1 text-center text-white bg-transparent border-white rounded" text="T" />
        <Label class="w-8 h-8 mx-1 text-center text-white bg-transparent border-white rounded" text="A" />
        <Label class="w-8 h-8 mx-1 text-center text-white bg-transparent border-white rounded" text="N" />
        <Label class="w-8 h-8 mx-1 text-center text-white bg-transparent border-white rounded" text="I" />
        <Label class="w-8 h-8 mx-1 text-center text-white bg-transparent border-white rounded" text="U" />
        <Label class="w-8 h-8 mx-1 text-center text-white bg-transparent border-white rounded" text="M" />
      </View>

      <Button class="mt-4" android:onClick="doAnimate" ios:onSingletap="doAnimate">Animate</Button>
      <Button android:onClick="doReset" ios:onSingletap="doReset">Reset</Button>
    </View>

    <Animation module="purgetss.ui" id="myAnimationReset" class="bg-transparent" />
    <Animation module="purgetss.ui" id="myAnimationOpen" class="open:scale-1 complete:bg-(#008800) complete:scale-100" />
  </Window>
</Alloy>
index.js
$.index.open();

function doAnimate() {
  $.myAnimationOpen.play($.letters.children);
}

function doReset() {
  $.myAnimationReset.apply($.letters.children);
}

complete example 1