小程序模板網(wǎng)

微信小程序 小程序制作及動畫(animation樣式)詳解

發(fā)布時間:2018-02-24 17:32 所屬欄目:小程序開發(fā)教程
這篇文章主要介紹了微信小程序 小程序制作及動畫詳解的相關(guān)資料,這里對小程序制作進(jìn)行了詳解,介紹動畫部分的知識,需要的朋友可以參考下

微信小程序制作

實(shí)現(xiàn)效果圖:

微信小程序也已出來有一段時間了,最近寫了幾款微信小程序項(xiàng)目,今天來說說感受。

首先開發(fā)一款微信小程序,最主要的就是針對于公司來運(yùn)營的,因?yàn)?,在申請appid(微信小程序ID號)時候,需要填寫相關(guān)的公司認(rèn)證信息如,營業(yè)執(zhí)照等

再次就是用一個未曾開通過公眾號的QQ號或微信號來注冊一個微信小程序號。

最后,下載微信小程序開發(fā)工具。

由于這里,我們更多的關(guān)注如何去開發(fā)一些app,而不是科譜微信小程序,故在此不在過多的解釋,詳細(xì)的說明,可以去官網(wǎng)幫助文檔。

在看到上圖,小伙伴們大致有一個了解,這個是調(diào)試工具中的,一些效果沒有在真機(jī)上好看。

由于在開發(fā)中,本以為畫面不是很流利,實(shí)際上完全出乎我的意料,動畫效果很流暢,可以與ios,andriod app相媲美,以后有時間講講開發(fā)其它app的相關(guān)例子。

在介紹這個文章前,假設(shè)用戶都已看過微信小程序的相關(guān)文檔。

這個項(xiàng)目基本上是按照微信原有的文件結(jié)構(gòu)來的,并沒有額外的去添加特別多的文件結(jié)構(gòu),因?yàn)槲⑿判〕绦蛞?guī)定,項(xiàng)目文件大小不能超過1M,要求我們盡可能的壓縮小程序代碼或其它圖片文件等,下面是微信app文件結(jié)構(gòu)整體截圖

1.app.js 主要是全局公共的js方法聲明及調(diào)用所在的文件

2.app.json 是小程序整個的配置文件,所以有的頁面都在要此注冊,不然不允許訪問(如下圖所示)

3.app.wxss 是小程序全局的css文件,公共css寫在此最好不過的了

4.pages下是對應(yīng)著所有頁面,每個頁面,可以添加四種類型的文件,.json,.wxss,.wxml,.js (如下圖所示)

5.utils 是我們公共的js存放的地方,因?yàn)槲⑿判〕绦蛞螅總€js文件里的方法不可以直接引用或調(diào)用,必須要用 module.exports方法導(dǎo)出,這樣pages 下的.js文件才可以調(diào)用到我們在此寫的js方法。這點(diǎn)特別要注意

 1)app.json頁面配置及注冊:

 2)pages頁面結(jié)構(gòu):

 下面我們開始詳細(xì)的講解每個頁面

一、首頁

首頁分為四個文件組成,如下圖所示,具體的頁面功能,上面已說過。

  下面來看下,index.wxml效果

  最上面的“來運(yùn)吧”標(biāo)題,在index.json文件下定義的,每個文件都可以用不同的.json來定義,當(dāng)然代碼也可以動態(tài)改變它

很簡單吧,標(biāo)題就這么簡單的出現(xiàn)了。

1)接下來看看橫向滾動的banner,

 index.wxml這樣來描述

那么swiper是什么東東呢?微信小程序幫助文檔這樣說明的 swiper滑塊視圖容器

性名 類型 默認(rèn)值 說明
indicator-dots Boolean false 是否顯示面板指示點(diǎn)
autoplay Boolean false 是否自動切換
current Number 0 當(dāng)前所在頁面的 index
interval Number 5000 自動切換時間間隔
duration Number 500 滑動動畫時長
circular Boolean false 是否采用銜接滑動
bindchange EventHandle   current 改變時會觸發(fā) change 事件,event.detail = {current: current}

注意:其中只可放置<swiper-item/>組件,其他節(jié)點(diǎn)會被自動刪除。

swiper-item

僅可放置在<swiper/>組件中,寬高自動設(shè)置為100%。

示例代碼:


<swiper indicator-dots="{{indicatorDots}}"
 autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
 <block wx:for="{{imgUrls}}">
  <swiper-item>
   <image src="{{item}}" class="slide-image" width="355" height="150"/>
  </swiper-item>
 </block>
</swiper>
<button bindtap="changeIndicatorDots"> indicator-dots </button>
<button bindtap="changeAutoplay"> autoplay </button>
<slider bindchange="intervalChange" show-value min="500" max="2000"/> interval
<slider bindchange="durationChange" show-value min="1000" max="10000"/> duration
Page({
 data: {
  imgUrls: [
   'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
   'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
   'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
  ],
  indicatorDots: false,
  autoplay: false,
  interval: 5000,
  duration: 1000
 },
 changeIndicatorDots: function(e) {
  this.setData({
   indicatorDots: !this.data.indicatorDots
  })
 },
 changeAutoplay: function(e) {
  this.setData({
   autoplay: !this.data.autoplay
  })
 },
 intervalChange: function(e) {
  this.setData({
   interval: e.detail.value
  })
 },
 durationChange: function(e) {
  this.setData({
   duration: e.detail.value
  })
 }
})
?

看了上面的官方文檔,就可以清楚的知道,這個就是我們類似在寫html里用到的banner滑動插件一樣,拿過來就可以使用,多么的方便。

我們的項(xiàng)目中同樣用參數(shù)綁定的方式,輸出的相關(guān)參數(shù)

參數(shù)定義在index.js pages({...})方法中

  為什么要綁定參數(shù)?為什么不直接寫入?yún)?shù)呢?好處太多,圖片我們不可能寫死,從服務(wù)器請求圖片,同時可以方便的控制我們的相關(guān)參數(shù)來改變swiper的行為等。

至于參數(shù)綁定,官網(wǎng)說的也很清楚,這里不在解釋。

2)城市選擇及切換

這塊看起來很簡單,實(shí)際上很麻煩,如果對動畫不熟悉的朋友,可以會苦惱一番的。

上面的動畫很流暢,可能是因?yàn)樽テ凉ぞ卟惶?,這點(diǎn)大可不用關(guān)心。

我們點(diǎn)擊中間的“交換圓”的時候,”出發(fā)城市“與”到達(dá)城市“相互交換,他們不是立即變化,而是中間有一個"位移"效果,同時,那個“交換的圓”也要旋轉(zhuǎn)180度。

這樣體驗(yàn)感立馬"高上大"。呵呵,不是嗎?下面我們詳細(xì)的來實(shí)現(xiàn)它。

我們首先來溫習(xí)下,官網(wǎng)動畫相關(guān)的文檔說明

wx.createAnimation(OBJECT)

創(chuàng)建一個動畫實(shí)例animation。調(diào)用實(shí)例的方法來描述動畫。最后通過動畫實(shí)例的export方法導(dǎo)出動畫數(shù)據(jù)傳遞給組件的animation屬性。

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

OBJECT參數(shù)說明:

參數(shù) 類型 必填 說明
duration Integer 動畫持續(xù)時間,單位ms,默認(rèn)值 400
timingFunction String 定義動畫的效果,默認(rèn)值"linear",有效值:"linear","ease","ease-in","ease-in-out","ease-out","step-start","step-end"
delay Integer 動畫延遲時間,單位 ms,默認(rèn)值 0
transformOrigin String 設(shè)置transform-origin,默認(rèn)為"50% 50% 0"

 

?
1
2
3
4
5
6
var animation = wx.createAnimation({
 transformOrigin: "50% 50%",
 duration: 1000,
 timingFunction: "ease",
 delay: 0
})

animation

動畫實(shí)例可以調(diào)用以下方法來描述動畫,調(diào)用結(jié)束后會返回自身,支持鏈?zhǔn)秸{(diào)用的寫法。

樣式:

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

旋轉(zhuǎn):

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

縮放:

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

偏移:

方法 參數(shù) 說明
translate tx,[ty] 一個參數(shù)時,表示在X軸偏移tx,單位px;兩個參數(shù)時,表示在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

傾斜:

方法 參數(shù) 說明
skew ax,[ay] 參數(shù)范圍-180~180;一個參數(shù)時,Y軸坐標(biāo)不變,X軸坐標(biāo)延順時針傾斜ax度;兩個參數(shù)時,分別在X軸傾斜ax度,在Y軸傾斜ay度
skewX ax 參數(shù)范圍-180~180;Y軸坐標(biāo)不變,X軸坐標(biāo)延順時針傾斜ax度
skewY ay 參數(shù)范圍-180~180;X軸坐標(biāo)不變,Y軸坐標(biāo)延順時針傾斜ay度

矩陣變形:

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

動畫隊(duì)列

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

示例:
 


<view animation="{{animationData}}" style="background:red;height:100rpx;width:100rpx"></view>
Page({
 data: {
  animationData: {}
 },
 onShow: function(){
  var animation = wx.createAnimation({
   duration: 1000,
    timingFunction: 'ease',
  })

  this.animation = animation

  animation.scale(2,2).rotate(45).step()

  this.setData({
   animationData:animation.export()
  })

  setTimeout(function() {
   animation.translate(30).step()
   this.setData({
    animationData:animation.export()
   })
  }.bind(this), 1000)
 },
 rotateAndScale: function () {
  // 旋轉(zhuǎn)同時放大
  this.animation.rotate(45).scale(2, 2).step()
  this.setData({
   animationData: this.animation.export()
  })
 },
 rotateThenScale: function () {
  // 先旋轉(zhuǎn)后放大
  this.animation.rotate(45).step()
  this.animation.scale(2, 2).step()
  this.setData({
   animationData: this.animation.export()
  })
 },
 rotateAndScaleThenTranslate: function () {
  // 先旋轉(zhuǎn)同時放大,然后平移
  this.animation.rotate(45).scale(2, 2).step()
  this.animation.translate(100, 100).step({ duration: 1000 })
  this.setData({
   animationData: this.animation.export()
  })
 }
})
?

這里我并不想一個一個的介紹官方的動畫說明文檔,因?yàn)閷懙暮芮宄?,而是我想說下一些關(guān)于動畫的機(jī)制

不管是位移,縮放,旋轉(zhuǎn),可能都會涉及到三個軸,那就是x,y,z,軸,這三個軸大致這樣的如下圖

 x軸是水平的,y軸在垂直方向上,而z軸,是"指向我們的方向"的一個軸,這點(diǎn)必須清楚,不然動畫的很多東西,你就沒辦法理解了。

好了,我們再來回過頭來看看官網(wǎng)的幾個動畫方法。

旋轉(zhuǎn):1.rotate(deg),2.rotateX(deg),3.rotateY(deg),4.rotateZ(deg),5.rotate3d(x,y,z,deg)

1.rotate表示以原點(diǎn)在順時針旋轉(zhuǎn)一個度數(shù)deg范圍在-180~180

假如我們要讓一個圖片,順時針旋轉(zhuǎn)90度,以原點(diǎn)為中心

可能剛開始圖片這樣排列的如下圖

  旋轉(zhuǎn)后,由圖A順時針旋轉(zhuǎn)90度至圖B,它是在一個X與Y的平面上與Z軸成垂直90度來順時針旋轉(zhuǎn)的。

由上述可以看出,圖片的左上角坐標(biāo)是(x:0,y:0,z:0);而我們要旋轉(zhuǎn)一個圖片,一般不希望在左上角做為旋轉(zhuǎn)點(diǎn),最多的情況下,就是以圖片的中心點(diǎn)為旋轉(zhuǎn)點(diǎn)(x:50%,y:50%,z:0) z坐標(biāo)是指向我們的坐標(biāo),就像css里的z-index一樣,我們應(yīng)該把它設(shè)為0,即使你設(shè)為任何一個數(shù)字,你的視角差也感不到任何不同,因?yàn)?,圖片的z軸是垂直我們視線的,故一般設(shè)置為0。

就像下面如圖所示,可能是我們希望的旋轉(zhuǎn)效果:

  不好意思呀,用QQ繪圖工具繪制,可能效果不太好,但是大致的表達(dá)了這種示意圖,

上圖描述了,由圖片A由中心點(diǎn),旋轉(zhuǎn)90度后的效果,那么如何初始化,讓圖片的原點(diǎn)由(x:0,y:0,z:0)更換為(x:50%,y:50%,z:0)呢?回過頭來看下官網(wǎng)教程的wx.createAnimation(OBJECT)方法

其中屬性transformOrigin 已說明,默認(rèn)為圖片的中心點(diǎn),可能是作者的初衷也這么認(rèn)為的,旋轉(zhuǎn)應(yīng)該以”元素“的中心點(diǎn)來操作應(yīng)用比較多點(diǎn),這是合情可理的

至此,我們旋轉(zhuǎn)一個圖片得了到大致的思路。其它的以X軸,Y軸,Z軸旋轉(zhuǎn)與些類似,不在累述。

animation樣式:

 

如何讓一個元素從一個位置從A點(diǎn)移到B點(diǎn)呢?可能通過上述的樣式屬性在改變”元素“的top bottom left right 達(dá)到效果,

當(dāng)然也可以通過其它動畫方法來改變,如偏移 translate(x,y,z)。

通過top bottom left right 樣式屬性來實(shí)現(xiàn)動畫,前提是,這個”元素“一定是相對定位或者絕對定位的,不然是不出效果的,這和寫css里的position:absolute相同的原理。

如果要讓一個元素或圖片從A點(diǎn)平移至B點(diǎn),就像下圖所以示

假如初始A坐標(biāo)為(x:10px,y:0px,z:0px)移至B點(diǎn)坐標(biāo)(x:120px,y:0px,z:0px),那樣我們只需改變元素的left或者right即可,

同理,可以用bottom,top來改變y坐標(biāo)。

好了,到此為止,我們項(xiàng)目的所需動畫可能要用到的效果都基本上有了思路。那么下面我們就來實(shí)現(xiàn)它。

首先,我們在”出發(fā)城市'與"到達(dá)城市"以及"旋轉(zhuǎn)圖片"定義如下:

  對應(yīng)的wxml界面:

 然后,我們?yōu)樽⒁獾皆趇ndex.wxss(如下圖)里給了絕對定位,目的就是想用left或right來動畫交換城市 

 這里注意一點(diǎn),animationsSourceCity初始化的時候,css里用了left, 動畫時,必須用它的left來"位移",而不是right

不然會看不到效果,這點(diǎn),在玩css3動畫的時候,就遇到過。同理,下面的animationsDestCity只能用right來"位移"。

為什么有的朋友會想在初始化的時候用left可動畫的時候想right的呢?可能考慮到元素的準(zhǔn)確的定位原因,畢竟,精確的定位不是一件很容易的事情。 為什么這么說呢?因?yàn)榭紤]到app在其它屏上顯示。

  從上面的截圖可以看到,現(xiàn)實(shí)中的問題,中間這塊,寬與高是用了px,就是說,我們不希望中間這個旋轉(zhuǎn)按扭自適應(yīng)不同的手機(jī)屏,而希望他能夠保持不變。這個時候,如果我們僅僅用left來平移"出發(fā)城市"至"到達(dá)城市"的坐標(biāo)處,可能不管你用px還是rpx或其它單位,都達(dá)不到精確定位了(為什么?)。

這個時候,換個角度來思考下,我們不需要讓它精確的位移至“到達(dá)城市”,為什么這么說呢?在”出發(fā)城市“移至”到達(dá)城市“前的一點(diǎn)很短的時間內(nèi),我們讓它在0s交換城市(也就是復(fù)位但文本內(nèi)容已交換),因?yàn)?s互換城市文本內(nèi)容,估計(jì)沒有任何人可以發(fā)覺到的。這就需要一個“恰當(dāng)?shù)臅r間”。

好了,我們來看看代碼:

定義三個動畫:
 


animation1 = wx.createAnimation({
     duration: 300,
     timingFunction: 'linear',
     transformOrigin: "50%,50%"
    })

    this.setData({
     animationData: animation1.export()
    })

     animation2 = wx.createAnimation({
     duration: 300,
     timingFunction: 'linear'
    })

    this.setData({
     animationSourceCity: animation2.export()
    })

     animation3 = wx.createAnimation({
     duration: 300,
     timingFunction: 'linear'
    })

    this.setData({
     animationDestCity: animation3.export()
    })
?

animation1是旋轉(zhuǎn)圖片的動畫定義(初始化,具體的參數(shù)官網(wǎng)說的很清楚,不多說)。

animation2與animation3分別是”出發(fā)城市“與”到達(dá)城市“定義

下面我們先來說說animation2,animation3

animation2要完成的是從left ”出發(fā)城市“水平移動至”到達(dá)城市“坐標(biāo)

我們看看點(diǎn)擊旋轉(zhuǎn)圖片時事件:
 


animation2.left('600rpx').step()
    this.setData({
    animationSourceCity: animation2.export()
   })

   setTimeout(function(){
    animation2.left('30rpx').step({duration: 0, transformOrigin: "50%,50%",timingFunction: 'linear'})
    that.setData({
      animationSourceCity: animation2.export()
    })
   },285)

   animation3.right('580rpx').step()
    this.setData({
    animationDestCity: animation3.export()
   })
   
    setTimeout(function(){
    animation3.right('30rpx').step({duration: 0, transformOrigin: "50%,50%",timingFunction: 'linear'})
    that.setData({
      animationDestCity: animation3.export()
    })
   },285)
?

我們來分析下上面的代碼:

在初始化的時候,設(shè)置了動畫完成時間duration:300ms,緊接著,點(diǎn)擊圖片開始水平移動600rpx?
 


animation2.left('600rpx').step()
    this.setData({
    animationSourceCity: animation2.export()
   })

 

這個時候600rpx只是粗略的計(jì)算,并不是真正的精確定位,原因上面我們解釋很清楚了,移動600rpx所需時間是300ms,緊接著,如果這樣的結(jié)束的話,很可能位置會錯位,所以我們要寫一個"特殊的動畫“,

 


"setTimeout(function(){
    animation2.left('30rpx').step({duration: 0, transformOrigin: "50%,50%",timingFunction: 'linear'})
    that.setData({
      animationSourceCity: animation2.export()
     })
  },285)
?

這個動畫表示,在285ms后,將要在0s時間完成"復(fù)位",在0s時間,估計(jì)沒有人會查覺得到,呵呵,復(fù)位的好處,太多了,如果不復(fù)位,意味,我們的元素真的交換了,那樣事件也給交換了,給我們帶來了太多的麻煩,而復(fù)位,可以讓我們僅僅交換了”城市文本“而不是所有。哈哈~開心,只所以定義285ms,是給一個很短的機(jī)會,讓人看不到復(fù)位的執(zhí)行,畢竟上面的300ms的水平動畫還沒有執(zhí)行完嘛

而真正的換交在下面的一句話
 


var tempSourceCity=this.data.sourceCity
   var tempDestCity=this.data.destCity
   this.setData({
    sourceCity:tempDestCity,
    destCity:tempSourceCity
   })
?

同理,right也一樣來現(xiàn)實(shí),這里不多說了,有興趣的可以嘗試下。

下面我們來說說,交換按扭圖片的旋轉(zhuǎn)動畫

如果在點(diǎn)擊事件rotate里我們這樣寫入
 


animation1.rotate(180).step()
   
   this.setData({
    animationData: animation1.export()
   })
?

恩,看起來不錯,我們嘗試的時候,第一旋轉(zhuǎn)了,然后第二次,第三次。。。并沒有旋轉(zhuǎn)。啊呀,愁人的事情又來了。我會不盡的報(bào)怨,小程序呀,你的bug又來了。

其實(shí)你看官網(wǎng)給出的例子也是如此,旋轉(zhuǎn)一下,再也不旋轉(zhuǎn)了,除非你刷新下頁面。

報(bào)怨歸報(bào)怨,納悶歸納悶,問題還要是解決的。

這是不是我們自己的問題呢?一萬個為什么。。。

不是!還記得,在css3動畫的時候,確實(shí)也這樣,我來畫圖解釋下為什么!

圖一、旋轉(zhuǎn)前:(注意A點(diǎn)的位置)

圖二、旋轉(zhuǎn)180度后(注意A的位置)

圖二是點(diǎn)擊旋轉(zhuǎn)圖片后,自己處于180度狀態(tài),此時,再次點(diǎn)擊此旋轉(zhuǎn)圖片,意味著,讓它再次從0度旋轉(zhuǎn)到180度,可是我們的代碼是
 


animation1.rotate(180).step()
?

這行代碼表示,讓它在300ms(初始化創(chuàng)建的時間)內(nèi)旋轉(zhuǎn)到180度,而是此時已處理180度啦,你點(diǎn)擊當(dāng)然它不會再旋轉(zhuǎn)了。它會不停報(bào)怨”我已在180度了呀,你還想怎么樣?!...“

所以,此時,我們能不能直接再讓旋轉(zhuǎn)360度,那么它不就相對于180度后的狀態(tài)又轉(zhuǎn)了180度了嗎?可是看看官網(wǎng),旋轉(zhuǎn)的范圍是-180~180度,既使沒有這么范圍限制,那么我們也會折騰死,不是嗎?每次都要180*2,180*3...,表示不服!

我想只要問題找到了,其實(shí)都很簡單了,此時估計(jì)都有朋友想到了,就是直接讓它歸0度嘛,這個歸0度的動畫時間必須要短,不然就要讓人看到了一個”倒旋轉(zhuǎn)的過程“,哇,那多么的難看呀,OK,動畫嘛,上面我們都有先例,0s復(fù)位到0度,你眼神再好,也查覺不到,嘿嘿。。。

完整的旋轉(zhuǎn)代碼如下:
 


animation1.rotate(180).step()
    
   this.setData({
    animationData: animation1.export()
   })
     
   var that=this; 
   setTimeout(function(){
    animation1.rotate(0).step({duration: 0, transformOrigin: "50%,50%",timingFunction: 'linear'})
    that.setData({
      animationData: animation1.export()
    })
   },300)
?

意思是,在點(diǎn)擊時候,在300ms內(nèi)旋轉(zhuǎn)180度,同時在300ms后執(zhí)行一個在0s時間完成新的動畫讓它復(fù)位至0度,下次點(diǎn)擊時,它就再次可以旋轉(zhuǎn)了!
 


animation1.rotate(0).step({duration: 0, transformOrigin: "50%,50%",timingFunction: 'linear'})//歸0度”復(fù)位“
?

上面的思想并不難,就是有時候不好發(fā)現(xiàn),或者說,沒接觸過動畫的朋友,一時半時找不出問題所在,寫在此,盡可能的讓大家少走彎路。

好了,這部分的動畫就全部完成了,下面我們還有首頁的上下不間斷滾動、類似蘋果手機(jī)ios app的滑動、刪除效果,以及https api(基于asp.net mvc)的搭建、交互等等,期待著我們一個一個的解決呢,這些我準(zhǔn)備將在后面的文章陸陸續(xù)續(xù)的寫出,敬請關(guān)注,謝謝。


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/22188.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢