网友真实露脸自拍10p,成人国产精品秘?久久久按摩,国产精品久久久久久无码不卡,成人免费区一区二区三区

小程序模板網

微信小程序--如何實現動畫效果

發布時間：2017-12-19 10:33 所屬欄目：小程序開發教程

view plaincopyviewclass="view_a"imageanimation="{{animation}}"class="a_img"src="http://img.blog.csdn.net/20170614190537974?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvVUZPMDAwMDE=/font/5a6L5L2T/fonts ...

 
 
 

 

[html] view plain copy
 
  1. <view  class="view_a">  
  2. <image animation="{{animation}}" class="a_img" src="http://img.blog.csdn.net/20170614190537974?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvVUZPMDAwMDE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center"></image>  
  3. </view>  
  4. <view class="sure" bindtap="dh">發射</view>  

 

 

[css] view plain copy
 
  1. .sure{  
  2.   width: 10%;  
  3.   height:80rpx;  
  4.   margin-top: 0rpx;  
  5.   margin-left: 45%;  
  6.   background: #00ddff;  
  7.   border-radius: 50rpx;  
  8.   text-align: center;  
  9.   line-height: 80rpx;  
  10.   color: #fff;  
  11. }  
  12. .view_a{  
  13.   width: 100%;  
  14.   height: 900rpx;  
  15.   display: flex;  
  16.   background-image: url('http://img.blog.csdn.net/20170615103714645?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvVUZPMDAwMDE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center');  
  17. }  
  18. .a_img{  
  19.   margin-top: 600rpx;  
  20.   margin-left:100rpx;  
  21.   width: 80rpx;  
  22.   height:80rpx;  
  23. }  

[javascript] view plain copy
 
  1. data: {  
  2.     animation : ''  
  3.  },  
  4.  dh: function(){  
  5.     var that = this;  
  6.      //實例化  
  7.      that.animation = wx.createAnimation({  
  8.        duration: 200,  
  9.        timingFunction: "ease",  
  10.        delay: 1000,  
  11.        transformOrigin: 'center',  
  12.        success: function (res) {  
  13.          console.log(res)  
  14.        }  
  15.      })  
  16.      that.animation  
  17.      .rotate(180).step()   //原點順時針旋轉180度  也可以不加.step() 不加的話便是動畫同時執行  
  18.      .rotate(-180).step()  //原點逆時針旋轉180度  
  19.      .rotate(0).step()     //回到初始  
  20.      .scale(1.3).step()    // x,y軸同時縮放1.3倍  
  21.      .translateX(90).step()//x軸偏移90px  
  22.      .translateY(20).step()//y軸偏移20px  
  23.      .skew(30).step()      //x軸沿順時針偏移30度  
  24.      .skew(-30).step()     //x軸沿逆時針偏移30度  
  25.      .skew(0).step()       //返回不偏移時  
  26.      .rotateY(180).step()  //Y軸旋轉180度  
  27.      .translateY(-222).step()//在y軸偏移-222px  
  28.      .matrix3d(0.8, 0, 28).step();  
  29.      that.setData({  
  30.        animation: that.animation.export()  
  31.      })},  

 

二. 小程序動畫 Animation API


wx.createAnimation(OBJECT)

創建一個動畫實例animation。調用實例的方法來描述動畫。最后通過動畫實例的export方法導出動畫數據傳遞給組件的animation屬性。

注意: export 方法每次調用后會清掉之前的動畫操作 

OBJECT參數說明：

參數 類型 必填 默認值 說明
duration Integer 否 400 動畫持續時間，單位ms
timingFunction String 否 "linear" 定義動畫的效果
delay Integer 否 0 動畫延遲時間，單位 ms
transformOrigin String 否 "50% 50% 0" 設置transform-origin

timingFunction 有效值：

值 說明
linear 動畫從頭到尾的速度是相同的
ease 動畫以低速開始，然后加快，在結束前變慢
ease-in 動畫以低速開始
ease-in-out 動畫以低速開始和結束
ease-out 動畫以低速結束
step-start 動畫第一幀就跳至結束狀態直到結束
step-end 動畫一直保持開始狀態，最后一幀跳到結束狀態 
var animation = wx.createAnimation({
  transformOrigin: "50% 50%",
  duration: 1000,
  timingFunction: "ease",
  delay: 0
})

animation

動畫實例可以調用以下方法來描述動畫，調用結束后會返回自身，支持鏈式調用的寫法。

animation 對象的方法列表：

樣式：

方法 參數 說明
opacity value 透明度，參數范圍 0~1
backgroundColor color 顏色值
width length 長度值，如果傳入 Number 則默認使用 px，可傳入其他自定義單位的長度值
height length 長度值，如果傳入 Number 則默認使用 px，可傳入其他自定義單位的長度值
top length 長度值，如果傳入 Number 則默認使用 px，可傳入其他自定義單位的長度值
left length 長度值，如果傳入 Number 則默認使用 px，可傳入其他自定義單位的長度值
bottom length 長度值，如果傳入 Number 則默認使用 px，可傳入其他自定義單位的長度值
right length 長度值，如果傳入 Number 則默認使用 px，可傳入其他自定義單位的長度值

旋轉：

方法 參數 說明
rotate deg deg的范圍-180~180，從原點順時針旋轉一個deg角度
rotateX deg deg的范圍-180~180，在X軸旋轉一個deg角度
rotateY deg deg的范圍-180~180，在Y軸旋轉一個deg角度
rotateZ deg deg的范圍-180~180，在Z軸旋轉一個deg角度
rotate3d (x,y,z,deg) 同transform-function rotate3d

縮放：

方法 參數 說明
scale sx,[sy] 一個參數時，表示在X軸、Y軸同時縮放sx倍數；兩個參數時表示在X軸縮放sx倍數，在Y軸縮放sy倍數
scaleX sx 在X軸縮放sx倍數
scaleY sy 在Y軸縮放sy倍數
scaleZ sz 在Z軸縮放sy倍數
scale3d (sx,sy,sz) 在X軸縮放sx倍數，在Y軸縮放sy倍數，在Z軸縮放sz倍數

偏移：

方法 參數 說明
translate tx,[ty] 一個參數時，表示在X軸偏移tx，單位px；兩個參數時，表示在X軸偏移tx，在Y軸偏移ty，單位px。
translateX tx 在X軸偏移tx，單位px
translateY ty 在Y軸偏移tx，單位px
translateZ tz 在Z軸偏移tx，單位px
translate3d (tx,ty,tz) 在X軸偏移tx，在Y軸偏移ty，在Z軸偏移tz，單位px

傾斜：

方法 參數 說明
skew ax,[ay] 參數范圍-180~180；一個參數時，Y軸坐標不變，X軸坐標延順時針傾斜ax度；兩個參數時，分別在X軸傾斜ax度，在Y軸傾斜ay度
skewX ax 參數范圍-180~180；Y軸坐標不變，X軸坐標延順時針傾斜ax度
skewY ay 參數范圍-180~180；X軸坐標不變，Y軸坐標延順時針傾斜ay度

矩陣變形：

方法 參數 說明
matrix (a,b,c,d,tx,ty) 同transform-function matrix
matrix3d   同transform-function matrix3d

動畫隊列

調用動畫操作方法后要調用 step() 來表示一組動畫完成，可以在一組動畫中調用任意多個動畫方法，一組動畫中的所有動畫會同時開始，一組動畫完成后才會進行下一組動畫。step 可以傳入一個跟 wx.createAnimation() 一樣的配置參數用于指定當前組動畫的配置。



易優小程序（企業版）+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址：http://www.xiuhaier.com/wxmini/doc/course/18205.html 復制鏈接 如需定制請聯系易優客服咨詢：800182392 點擊咨詢
QQ在線咨詢
AI智能客服 ×