swan.createAnimation
- 方法参数
- 示例

swan.createAnimation

解释：创建一个动画实例 animation 。

方法参数

Object object

返回值

Animation

object 参数说明

属性名	类型	必填	默认值	说明
duration	Number	否	400	动画持续时间（单位：ms）
timingFunction	String	否	‘linear’	定义动画的效果
delay	Number	否	0	动画延迟时间（单位：ms）
transformOrigin	String	否	‘50% 50% 0’	动画

timingFunction 有效值

值	说明
linear	以相同速度开始至结束
ease	慢速开始，然后变快，然后慢速结束
ease-in	慢速开始的过渡效果
ease-in-out	动画以低速开始和结束
ease-out	动画以低速结束
step-start	动画第一帧就跳至结束状态直到结束
step-end	动画一直保持开始状态，最后一帧跳到结束状态

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例 1

SWAN
JS
CSS

<view class="wrap">
    <view class="animation-element-wrapper flexTop">
        <view class="animation-element" animation="{{animation}}"></view>
    </view>
    <view class="card-area flexBottom swan-security-padding-bottom" style="height:{{isIPhoneX ? 5.7 : 4.1}}rem">
        <view class="top-description border-bottom">展示动画</view>
        <scroll-view scroll-y class="scroll">
            <button type="primary" bindtap="rotate">旋转</button>   
            <button type="primary" bindtap="scale">缩放</button>       
            <button type="primary" bindtap="translate">移动</button>       
            <button type="primary" bindtap="skew">倾斜</button>       
            <button type="primary" bindtap="rotateAndScale">旋转并缩放</button>       
            <button type="primary" bindtap="rotateThenScale">旋转后缩放</button>      
            <button type="primary" bindtap="all">同时展示全部动作</button>      
            <button type="primary" bindtap="allInQueue">顺序展示全部动作</button>     
            <button bindtap="reset">还原</button> 
        </scroll-view>
    </view>
</view>

代码示例 2：参数默认值

在开发者工具中打开

在 WEB IDE 中打开

SWAN
JS

<view class="wrap">
    <view class="anim" bindtap="startToAnimate" animation="{{animationData}}"></view>
</view>

代码示例 3：timingFunction

在开发者工具中打开

在 WEB IDE 中打开

SWAN
JS

<view class="wrap">
    <view class="anim" bindtap="startToAnimate" animation="{{animationData}}"></view>
</view>