首頁  >  文章  >  微信小程式  >  微信小程式animation API詳解及實例程式碼分享

微信小程式animation API詳解及實例程式碼分享

高洛峰
高洛峰原創
2017-03-13 10:33:162205瀏覽

這篇文章主要介紹了微信小程式animation API詳解及實例程式碼分享的相關資料,需要的朋友可以參考下

##動畫水還是比較深的,這裡只是簡單介紹下小程式中動畫的一些屬性和注意事項,做動畫前一定要整理好思路將動畫一步步分解,再進行組合!這裡只做引入。

wx.createAnimation(object)

#看官方介紹

1.建立一個動畫實例animation。呼叫實例的方法來描述動畫。最後透過動畫實例的export方法匯出動畫資料傳遞給元件的animation屬性。

2.呼叫動畫操作方法後要呼叫step() 來表示一組動畫完成,可以在一組動畫中呼叫任意多個動畫方法,一組動畫中的所有動畫會同時開始,一組動畫完成後才會進行下一組動畫。 step 可以傳入一個跟wx.createAnimation() 一樣的設定參數用來指定目前群組動畫的屬性

這還是比較好理解的例如第一個對應程式碼animation: this.animation.export()

第二條例如縮放動畫,也就說是一組scale,scaleX, scaleY…為一縮放動畫組的一個動畫方法,縮放動畫組和旋轉動畫組通過step()鏈接,按順序執行。程式碼中體驗吧!看效果反過來看會更容易理解

主要屬性:

微信小程序animation API详解及实例代码分享

#這裡主要樹下timingFunction和trans

formOrigin

timingFunction 設定動畫效果

  1. linear 預設為linear 動畫一直較為均勻

  2. ease 開始時緩慢中間加速到快結束時減速

  3. ease-in 開始的時候緩慢

  4. #ease-in-out 開始和結束時減速

  5. ##ease-out 結束時減速
  6. step-start 動畫一開始就跳到100% 直到動畫持續時間結束一閃而過
  7. step-end 保持0% 的樣式直到動畫持續時間結束一閃而過

  8. #transformOrigin 設定動畫的基點預設%50 %50 0

left,center

right

是水平方向取值,對應的百分值為left=0%;center=50%;right=100%

top

center bottom是垂直方向的取值,其中top=0%;center=50%;bottom=100%
動畫群組及動畫方法

樣式:

微信小程序animation API详解及实例代码分享旋轉:

微信小程序animation API详解及实例代码分享縮放:

微信小程序animation API详解及实例代码分享#偏移:

微信小程序animation API详解及实例代码分享

微信小程序animation API详解及实例代码分享##矩陣變形:

微信小程序animation API详解及实例代码分享

微信小程序animation API详解及实例代码分享

################## #########示範單一動畫群組效果#############

wxml


<view class="container">
 <view animation="{{animation}}" class="view">我在做动画</view>
</view>
<button type="primary" bindtap="rotate">旋转</button>

js


Page({
 data:{
  text:"Page animation",
  animation: &#39;&#39;
 },
 onLoad:function(options){
  // 页面初始化 options为页面跳转所带来的参数
 },
 onReady:function(){
  // 页面渲染完成
  //实例化一个动画
  this.animation = wx.createAnimation({
   // 动画持续时间,单位ms,默认值 400
   duration: 1000, 
   /**
    * http://www.php.cn/,0,.58,1 
    * linear 动画一直较为均匀
    * ease  从匀速到加速在到匀速
    * ease-in 缓慢到匀速
    * ease-in-out 从缓慢到匀速再到缓慢
    * 
    * http://www.php.cn/
    * step-start 动画一开始就跳到 100% 直到动画持续时间结束 一闪而过
    * step-end  保持 0% 的样式直到动画持续时间结束    一闪而过
    */
   timingFunction: &#39;linear&#39;,
   // 延迟多长时间开始
   delay: 100,
   /**
    * 以什么为基点做动画 效果自己演示
    * left,center right是水平方向取值,对应的百分值为left=0%;center=50%;right=100%
    * top center bottom是垂直方向的取值,其中top=0%;center=50%;bottom=100%
    */
   transformOrigin: &#39;left top 0&#39;,
   success: function(res) {
    console.log(res)
   }
  })
 },

 /**
  * 旋转
  */
 rotate: function() {
  //顺时针旋转10度
  //
  this.animation.rotate(150).step()
  this.setData({
   //输出动画
   animation: this.animation.export()
  })
 },

 onShow:function(){
  // 页面显示
 },
 onHide:function(){
  // 页面隐藏
 },
 onUnload:function(){
  // 页面关闭
 }
})

示範多個動畫群組效果

微信小程序animation API详解及实例代码分享

這裡我們只需要更改以下程式碼即可

  /**
   * 旋轉
  */
  rotate: function() {
    //兩個動畫組一定要以step()結尾
    /**
     * 動畫順序 順時針旋轉150度>x,y 放大二倍>x,y平移10px>x,y順時針傾斜>改變樣式和設定寬度寬度
    */
    this.animation.rotate(150).step( ).scale(2).step().translate(10).step().skew(10).step().opacity(0.5).width(10).step({ducation: 8000})
this.setData({
      //輸出動畫
      animation: this.animation.export()
    })
  }

#.對本站的支持!

以上是微信小程式animation API詳解及實例程式碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn