1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
| Page({
data: {
markers: [{
id: 0,
latitude: 28.0369400000,
longitude: 120.6492300000,
width: 20,
height: 20,
title: "欧美佳化妆美甲祛斑纹绣店"
}],
animationData: {}
},
onLoad: function () {
// 页面渲染完成
//实例化一个动画
this.animation = wx.createAnimation({
// 动画持续时间，单位ms，默认值 400
duration: 1000,
/**
* http://cubic-bezier.com/#0,0,.58,1
* linear 动画一直较为均匀
* ease 从匀速到加速在到匀速
* ease-in 缓慢到匀速
* ease-in-out 从缓慢到匀速再到缓慢
*
* http://www.tuicool.com/articles/neqMVr
* step-start 动画一开始就跳到 100% 直到动画持续时间结束 一闪而过
* step-end 保持 0% 的样式直到动画持续时间结束 一闪而过
*/
timingFunction: 'ease',
// 延迟多长时间开始
delay: 100,
/**
* 以什么为基点做动画 效果自己演示
* left,center right是水平方向取值，对应的百分值为left=0%;center=50%;right=100%
* top center bottom是垂直方向的取值，其中top=0%;center=50%;bottom=100%
*/
transformOrigin: 'center top 0',
success: function (res) {
console.log(res)
}
});
setTimeout(function () {
this.rotate();
}.bind(this), 200)
},
/**
* 放大显示
*/
rotate: function () {
//放大显示后并恢复
// //现在唯一的问题是 如果在循环里绑定相同的动画 却是单一执行呢 唉....
// this.animation.rotate(150).step()
this.animation.opacity(1).scale(1.5, 1.5).step().scale(1, 1).step();
this.setData({
//输出动画
animation: this.animation.export()
})
}
})
|
