QQ小程序 動(dòng)畫

界面動(dòng)畫的常見方式

在小程序中，通?？梢允褂?CSS 漸變 和 CSS 動(dòng)畫 來創(chuàng)建簡(jiǎn)易的界面動(dòng)畫。 同時(shí)，還可以使用 qq.createAnimation 接口來動(dòng)態(tài)創(chuàng)建簡(jiǎn)易的動(dòng)畫效果。 動(dòng)畫過程中，可以使用 bindtransitionend bindanimationstart bindanimationiteration bindanimationend 來監(jiān)聽動(dòng)畫事件。 事件名 含義 transitionend CSS 漸變結(jié)束或 qq.createAnimation 結(jié)束一個(gè)階段 animationstart CSS 動(dòng)畫開始 animationiteration CSS 動(dòng)畫結(jié)束一個(gè)階段 animationend CSS 動(dòng)畫結(jié)束 注意：這幾個(gè)事件都不是冒泡事件，需要綁定在真正發(fā)生了動(dòng)畫的節(jié)點(diǎn)上才會(huì)生效。

高級(jí)的動(dòng)畫方式

在一些復(fù)雜場(chǎng)景下，上述的動(dòng)畫方法可能并不適用。 QS 響應(yīng)事件 的方式可以通過使用 QS 來響應(yīng)事件的方法來動(dòng)態(tài)調(diào)整節(jié)點(diǎn)的 style 屬性。通過不斷改變 style 屬性的值可以做到動(dòng)畫效果。同時(shí)，這種方式也可以根據(jù)用戶的觸摸事件來動(dòng)態(tài)地生成動(dòng)畫。 使用連續(xù)使用 setData 來改變界面的方法也可以達(dá)到動(dòng)畫的效果。這樣可以任意地改變界面，但通常會(huì)產(chǎn)生較大的延遲或卡頓，甚至導(dǎo)致小程序僵死。此時(shí)可以通過將頁面的 setData 改為 自定義組件 中的 setData 來提升性能。下面的例子是使用 setData 來實(shí)現(xiàn)秒表動(dòng)畫的示例。