微信小程式的動畫效果

2022-06-06 10:15:07 字數 1699 閱讀 7084

前言

由於公司計畫有變,所以從h5頁面改成去小程式寫。所以在著手開發小程式。本人也不是什麼前端高手,只是一名寫後端偶爾寫寫前端的渣渣。請前端大神們勿噴。

二、小程式不能操縱dom

小程式不能直接操縱dom,鼓勵的是資料繫結。例如vue.js這種。所以個人而言感覺跟如果習慣了用jq去操縱dom的開發者很不習慣。需要乙個習慣的過程。

三、小程式不能引用jq

小程式雖然可以引用外部js。但是我一引用就出現異常。可能需要加以修改才能使用。我心想既然都做小程式了。不如按小程式的那一套走吧。所以就看小程式的api來走了。

四、使用小程式實現基本的切換動畫

從上面的**我們可以看到,我分別用了checkcodebtnopacity,checkcodeopacity控制了兩個塊的透明度。用於隱藏。

用animationdata儲存動畫資料。

然後給bindgetcheckcode繫結了乙個click事件。

接著呼叫this.setdata()來改動資料來源。切換動畫完成。

前言

由於公司計畫有變,所以從h5頁面改成去小程式寫。所以在著手開發小程式。本人也不是什麼前端高手,只是一名寫後端偶爾寫寫前端的渣渣。請前端大神們勿噴。

二、小程式不能操縱dom

小程式不能直接操縱dom,鼓勵的是資料繫結。例如vue.js這種。所以個人而言感覺跟如果習慣了用jq去操縱dom的開發者很不習慣。需要乙個習慣的過程。

三、小程式不能引用jq

小程式雖然可以引用外部js。但是我一引用就出現異常。可能需要加以修改才能使用。我心想既然都做小程式了。不如按小程式的那一套走吧。所以就看小程式的api來走了。

四、使用小程式實現基本的切換動畫

從上面的**我們可以看到,我分別用了checkcodebtnopacity,checkcodeopacity控制了兩個塊的透明度。用於隱藏。

用animationdata儲存動畫資料。

然後給bindgetcheckcode繫結了乙個click事件。

接著呼叫this.setdata()來改動資料來源。切換動畫完成。

微信小程式開發 動畫效果

動畫效果的實現,使用wx.createanimation 實現。具體實現時,首先,建立動畫物件,並設定相關的引數 其次,設定動畫型別,並執行動畫 第三,匯出並設定動畫資料 最後,將設定的動畫資料動態配置相應的元件,以此實現元件的動畫效果。效果圖 示例 wxml html view plain cop...

微信小程式動畫

一 自定義動畫使用步驟 1.建立動畫例項 let animation wx.createanimation duration 900 2.呼叫例項的方法 動畫執行過程 animation.opacity 0.5 scale 1.3,1.3 step opacity 1 scale 1,1 step ...

微信小程式實現卡片切換動畫效果

index.wxml 你有一封新的信件 致 by 2.index.wxss xin xin title xin border xin list xin list single nth of type 1 xin list single nth of type 2 xin list single nt...