微信小程序开发之动画 Animation 放大 透明度

突发奇想,做个录音的模块,结果折腾到一点钟,还在做话筒的动画.

最后发现微信还有bug,我也是醉了.有空再接着敲.

先上gif:

这还没完成,做完之后应该是水波纹的样子.无奈函数执行多次,动画只执行一次.还是先把锅甩出去.

上微信开发文档的图:

代码先贴上:

1.index.wxml

[html]  view plain  copy

 

1. <!--index.wxml-->  
2. <view  class="voice-style" bindtap="startSpeak">  
3. <image class="bg-style" src="../../images/voice_icon_speaking_bg_normal.png"></image>  
4. <image class="bg-style" animation="{{spreakingAnimation}}" src="../../images/voice_video_loading_0.png"></image>  
5. <image class="sound-style" src="../../images/voice_icon_speech_sound_1.png"></image>  
6. <image class="sound-style" src="../../images/voice_icon_speech_sound_2.png"></image>  
7. <image class="sound-style" src="../../images/voice_icon_speech_sound_3.png"></image>  
8. <image class="sound-style" src="../../images/voice_icon_speech_sound_4.png"></image>  
9. <image class="sound-style" src="../../images/voice_icon_speech_sound_5.png"></image>  
10. </view>  

2.index.wxss

[css]  view plain  copy

 

1. /**index.wxss**/  
2. .voice-style {  
3.   margin-top: 400px;  
4.   display: flex;  
5.   position: relative;  
6.   flex-direction: column;  
7.   align-items: center;  
8. }  
9.   
10. .bg-style {  
11.   position: absolute;  
12.   width: 100px;  
13.   height: 100px;  
14. }  
15. .sound-style{  
16.   position: absolute;  
17.   width: 37.6px;  
18.   height: 60px;  
19.   margin-top: 20px;  
20. }  

3.index.js

[javascript]  view plain  copy

 

1. //index.js  
2. //获取应用实例  
3. var app = getApp()  
4. Page({  
5.   data: {  
6.     spreakingAnimation: {},//放大动画  
7.   },  
8.   onLoad: function () {  
9.   },  
10.   //点击开始说话  
11.   startSpeak: function () {  
12.     var _this = this;  
13.     var timer = setInterval(function () {  
14.       console.log("开始说话.....")  
15.       speaking.call(_this);  
16.     }, 200);  
17.   },  
18. })  
19. function speaking() {  
20.   console.log("动画.....")  
21.   var _this = this;  
22.   var animation = wx.createAnimation({  
23.     duration: 1000,  
24.   })  
25.   animation.opacity(0).scale(3, 3).step();//修改透明度,放大  
26.   this.setData({  
27.     spreakingAnimation: animation.export()  
28.   })  
29. }  

在wx.createAnimation(OBJECT)中有几个参数还是得说说.

duration:动画持续时间,这个容易理解.

delay:延迟多久开始执行

timingFunction 设置动画效果

1. linear 默认为linear 动画一直较为均匀
2. ease 开始时缓慢中间加速到快结束时减速
3. ease-in 开始的时候缓慢
4. ease-in-out 开始和结束时减速
5. ease-out 结束时减速
6. step-start 动画一开始就跳到 100% 直到动画持续时间结束 一闪而过
7. step-end 保持 0% 的样式直到动画持续时间结束 一闪而过
   

transformOrigin 设置动画的基点 默认%50 %50 0

left,center right是水平方向取值，对应的百分值为left=0%;center=50%;right=100%

top center bottom是垂直方向的取值，其中top=0%;center=50%;bottom=100%

demo源码下载
http://blog.csdn.net/qq_31383345