ホームページ > 記事 > WeChat アプレット > 雲を浮かせる効果を実現するためにWeChatアプレットによって開発されたアニメーションループアニメーション
この記事では、WeChat アプレット開発におけるアニメーション ループ アニメーションによって実現される浮遊雲効果を主に紹介し、必要な友人がループ アニメーション効果を実現するための JS タイム関数と組み合わせたアニメーションの具体的な手順と関連する操作スキルを分析します。以下を参照してください
この記事の例では、WeChat アプレットによって開発されたアニメーション ループ アニメーションによって実現される浮遊雲効果について説明します。詳細は次のとおりです:
WeChat アプレットはアニメーションを実現するための API を提供しますが、ループで再生することはできません。これらはすべて 1 回限りであり、一度終了すると終了します。ここではループ アニメーションのおもちゃを実現するための WeChat アプレット アニメーションを紹介します。皆さんが実際のループを実現するためのより良い方法を考え出すことを願っています。このループアニメーションはjsスクリプトのsetIntervalで実装されているためおもちゃと言われていますが、実際の動作ではsetIntervalの遅延がますます大きくなります。これはjsのシングルスレッド動作モードによるものです(for.このレベルの情報を参照してください)、アニメーションのギャップはそれほど滑らかではないので、しばらく遊んで雲を浮かせてみましょう...
スクリーンショットは次のとおりです:
実装コード:
index.wxml
<view class="clouds"> <image animation="{{animationCloudData}}" class="yun1" src="../../img/yun1.png"></image> </view>
index.js
onReady: function () { // 页面渲染完成 // 实例化一个动画 var that = this; var i = 0 var ii = 0 var animationData = wx.createAnimation({ duration: 1000, // 默认为400 动画持续时间,单位ms timingFunction: 'ease-in-out', //transformOrigin: '4px 91px' }); var animationCloudData = wx.createAnimation({ duration: 1000, // 默认为400 动画持续时间,单位ms timingFunction: 'ease-in-out', //transformOrigin: '4px 91px' }); // 顺序执行,当已经执行完上面的代码就会开启定时器 // 循环执行代码 //dotAnFun = setInterval(function () {}); /*setInterval(function () { // 动画脚本定义 //animationData.rotate(6 * (++i)).step() //animationData.scale(2, 2).rotate(45).step().scale(1, 1).step(); animationData.translateY(10).step({ duration: 500 }).translateY(-10).step({ duration: 500 }); // 更新数据 that.setData({ // 导出动画示例 animationData: animationData.export(), //animationCloudData: animationCloudData.export(), }) ++i; console.log(i); }.bind(that), 2000);//循环时间 这里1000是1秒 */ //动画的脚本定义必须每次都重新生成,不能放在循环外 animationCloudData.translateX(200).step({ duration: 5000 }).translateX(0).step({ duration: 5000 }); // 更新数据 that.setData({ // 导出动画示例 //animationData: animationData.export(), animationCloudData: animationCloudData.export(), }) setInterval(function () { //动画的脚本定义必须每次都重新生成,不能放在循环外 animationCloudData.translateX(300).step({ duration: 5000 }).translateX(-100).step({ duration: 5000 }); // 更新数据 that.setData({ // 导出动画示例 //animationData: animationData.export(), animationCloudData: animationCloudData.export(), }) ++ii; console.log(ii); }.bind(that),10000);//3000这里的设置如果小于动画step的持续时间的话会导致执行一半后出错 }
index.wxss
.clouds{ margin-top:320rpx; } .yun1{ width:320rpx; height: 120rpx; }
添付ファイル: 参照とバックアップ:
りー以上です この記事の内容はすべて、皆さんの学習に役立つことを願っています。 役立つ内容については、PHP 中国語 Web サイトに注目してください。
関連する推奨事項:
WeChat アプレットは、ログイン ページに浮かぶ雲のアニメーション効果を実現します
WeChat アプレットによって実装されたスネーク ゲーム [ソース コード付き]
以上が雲を浮かせる効果を実現するためにWeChatアプレットによって開発されたアニメーションループアニメーションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。