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 | 动画一直保持开始状态,最后一帧跳到结束状态。 |
示例
扫码体验
请使用百度APP扫码
代码示例1 - 参数默认值
<view class="wrap">
<view class="anim" bindtap="startToAnimate" animation="{{animationData}}"></view>
</view>
Page({
data: {
animationData: {}
},
startToAnimate() {
const animation = swan.createAnimation();
animation.rotate(90).translateY(10).step();
animation.rotate(-90).translateY(-10).step();
this.setData({
animationData: animation.export()
});
console.log('createAnimation', animation);
}
});
代码示例2 - timingFunction 为 ease
<view class="wrap">
<view class="anim" bindtap="startToAnimate" animation="{{animationData}}"></view>
</view>
Page({
data: {
animationData: {}
},
startToAnimate() {
const animation = swan.createAnimation({
transformOrigin: "50% 50%",
duration: 1000,
timingFunction: "ease",
delay: 0
});
animation.rotate(90).translateY(10).step();
this.setData({
animationData: animation.export()
});
console.log('createAnimation', animation);
}
});
代码示例3 - timingFunction 为 ease-in
<view class="wrap">
<view class="anim" bindtap="startToAnimate" animation="{{animationData}}"></view>
</view>
Page({
data: {
animationData: {}
},
startToAnimate() {
const animation = swan.createAnimation({
transformOrigin: "50% 50%",
duration: 1000,
timingFunction: "ease-in",
delay: 0
});
animation.rotate(90).translateY(10).step();
animation.rotate(-90).translateY(-10).step();
this.setData({
animationData: animation.export()
});
console.log('createAnimation', animation);
}
});
代码示例4 - timingFunction 为 ease-in-out
<view class="wrap">
<view class="anim" bindtap="startToAnimate" animation="{{animationData}}"></view>
</view>
Page({
data: {
animationData: {}
},
startToAnimate() {
const animation = swan.createAnimation({
transformOrigin: "50% 50%",
duration: 1000,
timingFunction: "ease-in-out",
delay: 0
});
animation.rotate(90).translateY(10).step();
animation.rotate(-90).translateY(-10).step();
this.setData({
animationData: animation.export()
});
console.log('createAnimation', animation);
}
});
代码示例5 - timingFunction 为 ease-out
<view class="wrap">
<view class="anim" bindtap="startToAnimate" animation="{{animationData}}"></view>
</view>
Page({
data: {
animationData: {}
},
startToAnimate() {
const animation = swan.createAnimation({
transformOrigin: "50% 50%",
duration: 1000,
timingFunction: "ease-out",
delay: 0
});
animation.rotate(90).translateY(10).step();
animation.rotate(-90).translateY(-10).step();
this.setData({
animationData: animation.export()
});
console.log('createAnimation', animation);
}
});
代码示例6 - timingFunction 为 step-start
<view class="wrap">
<view class="anim" bindtap="startToAnimate" animation="{{animationData}}"></view>
</view>
Page({
data: {
animationData: {}
},
startToAnimate() {
const animation = swan.createAnimation({
transformOrigin: "50% 50%",
duration: 1000,
timingFunction: "step-start",
delay: 0
});
animation.rotate(90).translateY(10).step();
animation.rotate(-90).translateY(-10).step();
this.setData({
animationData: animation.export()
});
console.log('createAnimation', animation);
}
});
代码示例7 - timingFunction 为 step-end
<view class="wrap">
<view class="anim" bindtap="startToAnimate" animation="{{animationData}}"></view>
</view>
Page({
data: {
animationData: {}
},
startToAnimate() {
const animation = swan.createAnimation({
transformOrigin: "50% 50%",
duration: 1000,
timingFunction: "step-end",
delay: 0
});
animation.rotate(90).translateY(10).step();
animation.rotate(-90).translateY(-10).step();
this.setData({
animationData: animation.export()
});
console.log('createAnimation', animation);
}
});