微信小程序的動(dòng)畫效果詳解
前言
由于公司計(jì)劃有變，所以從H5頁面改成去小程序?qū)?。所以在著手開發(fā)小程序。本人也不是什么前端高手，只是一名寫后端偶爾寫寫前端的渣渣。請(qǐng)前端大神們勿噴。
一、什么是微信小程序？
小程序在我的理解中只是高度封裝的H5，封裝了各種組件。根據(jù)官方的說法小程序運(yùn)行不是在瀏覽器當(dāng)中。姑且算是微信的插件吧。
二、小程序不能操縱DOM
小程序不能直接操縱DOM，鼓勵(lì)的是數(shù)據(jù)綁定。例如vue.js這種。所以個(gè)人而言感覺跟如果習(xí)慣了用JQ去操縱DOM的開發(fā)者很不習(xí)慣。需要一個(gè)習(xí)慣的過程。
三、小程序不能引用JQ
小程序雖然可以引用外部JS。但是我一引用就出現(xiàn)異常?？赡苄枰右孕薷牟拍苁褂?。我心想既然都做小程序了。不如按小程序的那一套走吧。所以就看小程序的API來走了。
四、使用小程序?qū)崿F(xiàn)基本的切換動(dòng)畫
html代碼
js代碼
從上面的代碼我們可以看到，我分別用了checkCodeBtnOpacity,checkCodeOpacity控制了兩個(gè)塊的透明度。用于隱藏。
用animationData保存動(dòng)畫數(shù)據(jù)。
然后給bindGetCheckCode綁定了一個(gè)click事件。
然后調(diào)用了微信的API wx.createAnimation ，然后調(diào)用了opacity(1)來顯示，然后調(diào)用translateY(-100)Y軸平移來做一個(gè)上升的效果。
相關(guān)的API參數(shù)可以查看小程序API文檔，地址：https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-animation.html?t=2017112#wxcreateanimationobject
接著調(diào)用this.setData()來改動(dòng)數(shù)據(jù)源。切換動(dòng)畫完成。
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！
- 微信小程序?qū)崿F(xiàn)元素漸入漸出動(dòng)畫效果封裝方法
- 微信小程序 小程序制作及動(dòng)畫（animation樣式）詳解
- 微信小程序 連續(xù)旋轉(zhuǎn)動(dòng)畫（this.animation.rotate）詳解
- 微信小程序?qū)崿F(xiàn)animation動(dòng)畫
- 微信小程序?qū)崿F(xiàn)登錄頁云層漂浮的動(dòng)畫效果
- 微信小程序scroll-view組件實(shí)現(xiàn)滾動(dòng)動(dòng)畫
- 微信小程序loading組件顯示載入動(dòng)畫用法示例【附源碼下載】
- 微信小程序開發(fā)animation心跳動(dòng)畫效果
- 微信小程序開發(fā)之錄音機(jī) 音頻播放 動(dòng)畫實(shí)例 (真機(jī)可用)
- 微信小程序?qū)崿F(xiàn)漸入漸出動(dòng)畫效果
相關(guān)文章
js實(shí)現(xiàn)隨機(jī)抽獎(jiǎng)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)隨機(jī)抽獎(jiǎng)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
今天小編大家分享一篇Layui選項(xiàng)卡制作歷史瀏覽記錄的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
微信小程序scroll-view實(shí)現(xiàn)滾動(dòng)穿透和阻止?jié)L動(dòng)的方法
這篇文章主要介紹了微信小程序scroll-view實(shí)現(xiàn)滾動(dòng)穿透和阻止?jié)L動(dòng)的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了JavaScript阻止表單提交方法,通過代碼示例講解了阻止表單提交需要注意的事項(xiàng)，以及onSubmit和check（）的區(qū)別寫法,需要的朋友可以參考下2017-08-08
這篇文章主要為大家詳細(xì)介紹了js正則表達(dá)式注冊(cè)頁面表單驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
微信開發(fā) js實(shí)現(xiàn)tabs選項(xiàng)卡效果
這篇文章主要介紹了微信開發(fā)的學(xué)習(xí)筆記，js實(shí)現(xiàn)tabs選項(xiàng)卡效果,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
IE6-8中Date不支持toISOString的修復(fù)方法
這篇文章主要介紹了IE6-8中Date不支持toISOString的修復(fù)方法,需要的朋友可以參考下2014-05-05
js對(duì)文章內(nèi)容進(jìn)行分頁示例代碼
這篇文章主要介紹了使用js對(duì)文章內(nèi)容進(jìn)行分頁的具體實(shí)現(xiàn),需要的朋友可以參考下2014-03-03
JavaScript中檢測(cè)變量是否存在遇到的一些問題
要檢測(cè)某一變量是否存在，雖然簡(jiǎn)單但是也要細(xì)心，下面整理了幾點(diǎn)，遇到類似問題的朋友可以參考下2013-11-11
這篇文章主要介紹了微信小程序 搜索框組件代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09