百度智能小程序 Animation
Animation
解释：动画实例可以调用以下方法来描述动画，调用结束后会返回自身，支持链式调用的写法。
属性说明
| 属性名 | 说明 |
|---|---|
| Animation.matrix | 同transform-function matrix |
| Animation.matrix3d | 3D 转换，同transform-function matrix |
| Animation.rotate | 从原点顺时针旋转一个角度 |
| Animation.rotate3d | 从固定轴顺时针旋转一个角度 |
| Animation.rotateX | 从 X 轴顺时针旋转一个角度 |
| Animation.rotateY | 从 Y 轴顺时针旋转一个角度 |
| Animation.rotateZ | 从 Z 轴顺时针旋转一个角度 |
| Animation.scale | 缩放 |
| Animation.scale3d | 缩放 |
| Animation.scaleX | 缩放 X 轴 |
| Animation.scaleY | 缩放 Y 轴 |
| Animation.scaleZ | 缩放 Z 轴 |
| Animation.skew | 对 X、Y 轴坐标进行倾斜 |
| Animation.skewX | 对 X 轴坐标进行倾斜 |
| Animation.skewY | 对 Y 轴坐标进行倾斜 |
| Animation.translate | 平移变换 |
| Animation.translate3d | 对 X、Y、Z 坐标进行平移变换 |
| Animation.translateX | 对 X 轴平移 |
| Animation.translateY | 对 Y 轴平移 |
| Animation.translateZ | 对 Z 轴平移 |
示例
图片示例
代码示例 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()
});
}
});代码示例 2: 动画样式设置
<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: 'linear',
delay: 0
});
animation.opacity(0.5);
animation.backgroundColor('#DC143C');
animation.rotate(90).translateY(10).step();
animation.rotate(-90).translateY(-10).step();
this.setData({
animationData: animation.export()
});
console.log('createAnimation', animation);
}
});代码示例 3: 动画宽高设置
<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: 'linear',
delay: 0
});
animation.opacity(0.5);
animation.backgroundColor('#DC143C');
animation.width('20px');
animation.height('70px');
animation.top('40px');
animation.left('90px');
animation.bottom('60px');
animation.right('80px');
animation.rotate(90).translateY(10).step();
animation.rotate(-90).translateY(-10).step();
this.setData({
animationData: animation.export()
});
console.log('createAnimation', animation);
}
});代码示例 4: 底部弹窗自定义动画（css 控制）
<button bindtap="showshadow" type="primary">点击显示底部弹框</button>
<view class="content {{click? 'showContent': 'hideContent'}} {{option? 'open': 'close'}}" hover-stop-propagation="true">
<!-- 内容 -->
<view class="content-top" s-for="item in list">
{{item}}
</view>
</view>Page({
data: {
click: false, // 是否显示弹窗内容
option: false, // 是否显示弹窗或关闭弹窗的操作动画
list: ['列表一','列表二','列表三','列表四']
},
showshadow() {
if (!this.data.click) {
this.setData({
click: true,
})
}
if (this.data.option) {
this.setData({
option: false,
})
// 关闭显示弹窗动画的内容，若不设则点击任何地方，都会出现弹窗
setTimeout(() => {
this.setData({
click: false,
})
}, 500)
} else {
this.setData({
option: true
})
}
}
});
.content {
width: 100%;
position: absolute;
bottom: 0;
box-shadow: 0 0 10rpx #333;
height: 0;
z-index: 999;
font-size: 28.99rpx;
}
.showContent {
display: block;
}
.hideContent {
display: none;
}
/* 显示或关闭内容时动画 */
.open {
animation: slideContentUp 0.5s ease-in both;
}
.close {
animation: slideContentDown 0.5s ease-in both;
}
/* 弹出或关闭动画来动态设置内容高度 */
@keyframes slideContentUp {
from {
height: 0;
}
to {
height: 800rpx;
}
}
@keyframes slideContentDown {
from {
height: 800rpx;
}
to {
height: 0;
}
}代码示例 5: 底部弹窗自定义动画（API 控制）
<view class="wrap">
<button bindtap="showShadow" type="primary">点击显示底部弹框</button>
<!-- 遮罩层 -->
<view class="shadow" s-if="{{chooseSize}}" bindtap="hideModal"></view>
<!-- 上滑高度 -->
<view class="choosen" s-if="{{chooseSize}}" animation="{{animationData}}">
<!-- 内容 -->
<view class="content-top" s-for="item in list">
{{item}}
</view>
</view>Page({
data:{
chooseSize: false,
list: ['列表一','列表二','列表三','列表四']
},
showShadow(e){
this.data.chooseSize ? this.hideModal() : this.chooseSezi();
},
chooseSezi() {
// 创建一个动画实例
let animation = swan.createAnimation({
transformOrigin: "50% 50%",
duration: 1000,
timingFunction: "ease",
delay: 0
});
animation.translateY(1000).step();
this.setData({
animationData: animation.export(),
chooseSize: true
})
// 设置setTimeout来改变y轴偏移量，实现有感觉的滑动 滑动时间
setTimeout(() => {
animation.translateY(0).step();
this.setData({
animationData: animation.export(),
clearcart: false
})
}, 100);
},
// 隐藏
hideModal(e) {
let animation = swan.createAnimation({
transformOrigin: "50% 50%",
duration: 1000,
timingFunction: "ease",
delay: 0
})
animation.translateY(700).step();
this.setData({
animationData: animation.export()
})
setTimeout(() => {
animation.translateY(0).step();
this.setData({
animationData: animation.export(),
chooseSize: false
})
}, 500);
}
});代码示例 6: 弹出菜单特效的实现
<view>
<image src="/images/ai.png" class="image" animation="{{animFavor}}"></image>
<image src="/images/basecontent.png" class="image" animation="{{animShare}}"></image>
<image src="/images/canvas.png" class="image" animation="{{animWrite}}"></image>
<image src="/images/interface.png" class="image-plus" animation="{{animPlus}}" bindtap="isPopping"></image>
</view>Page({
data: {
isPopping: false,
animPlus: {},
animFavor: {},
animShare: {},
animWrite: {},
},
isPopping () {
if (this.data.isPopping) {
this.pop();
this.setData({
isPopping: false
})
} else {
this.popBack();
this.setData({
isPopping: true
})
}
},
pop() {
let animationPlus = swan.createAnimation({
duration: 500,
timingFunction: 'ease-out'
})
let animFavor = swan.createAnimation({
duration: 500,
timingFunction: 'ease-out'
})
let animShare = swan.createAnimation({
duration: 500,
timingFunction: 'ease-out'
})
let animWrite = swan.createAnimation({
duration: 500,
timingFunction: 'ease-out'
})
animationPlus.rotateZ(180).step();
animFavor.translate(-100, -100).rotateZ(180).opacity(1).step();
animShare.translate(-140, 0).rotateZ(180).opacity(1).step();
animWrite.translate(-100, 100).rotateZ(180).opacity(1).step();
this.setData({
animPlus: animationPlus.export(),
animFavor: animFavor.export(),
animShare: animShare.export(),
animWrite: animWrite.export()
})
},
popBack() {
let animationPlus = swan.createAnimation({
duration: 500,
timingFunction: 'ease-out'
})
let animFavor = swan.createAnimation({
duration: 500,
timingFunction: 'ease-out'
})
let animShare = swan.createAnimation({
duration: 500,
timingFunction: 'ease-out'
})
let animWrite = swan.createAnimation({
duration: 500,
timingFunction: 'ease-out'
})
animationPlus.rotateZ(0).step();
animFavor.translate(0, 0).rotateZ(0).opacity(0).step();
animShare.translate(0, 0).rotateZ(0).opacity(0).step();
animWrite.translate(0, 0).rotateZ(0).opacity(0).step();
this.setData({
animPlus: animationPlus.export(),
animFavor: animFavor.export(),
animShare: animShare.export(),
animWrite: animWrite.export()
})
}
}).image {
height: 150rpx;
width: 150rpx;
position: absolute;
bottom: 250rpx;
right: 100rpx;
opacity: 0;
}
.image-plus {
height: 150rpx;
width: 150rpx;
position: absolute;
bottom: 250rpx;
right: 100rpx;
z-index: 100;
}