uni-app小程序uni.createAnimation动画效果快速上手教程
<div data-block="true" data-editor="cro9a" data-offset-key="cesfi-0-0"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="cesfi-0-0">
<p>在实现某个功能的时候，因为基础不够只能拆分2个步骤来学习，第一个学习uni-app小程序uni.createAnimation动画效果，第二个在思考在这基础上实现某个功能，于是…..</p>
<p>写了3小时，出了3个bug</p>
<h3><em>建立动画</em></h3>
<p>建立动画有2个方式，为了学习就简单点：</p>
<p>1.直接在点击的行数中去建立（如果一个界面只有一个动画那就随意）；</p>
<p>2.onShow函数周期里面事先建立一个动画（推举）</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic">// 生命周期,页面打开提前渲染
onShow: function(){
// 初始化一个动画
var animation = uni.createAnimation({
// 动画时间
duration: 1000,
// 动画速度
timingFunction: 'linear',
})
// 存在return字段中
this.animation = animation
},</pre>
<p>timingFunction有效</p>
<p><img src="http://dingyue.ws.126.net/2022/0421/60842272j00ranzck0019c001te00pwm.jpg"></p>
<h3><em>设置字段</em></h3>
<p>字段里面我们需要存2个东西，一个是我们建立好的animation，另外一个触发动画的开关，例如我们开灯的感觉需要一个开关控制</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic"><code> animationData: {},
open: false</code></pre>
<h3><em>绑定动画</em></h3>
<p>view画一个矩形，随后绑定我们的animation动画和一个点击函数</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic"><view class="op" :animation="animationData" @tap="openTap()"></view></pre>
<h3><em>触发函数</em></h3>
<span data-offset-key="cesfi-0-0"><span data-offset-key="cesfi-0-0">点击矩形之后我们判断布尔值是flase还是true来执行相对于动画效果</span></span>
<pre class="EnlighterJSRAW" data-enlighter-language="generic">openTap() {
console.log(this.open)
if (this.open == false ) {
this.open = true;
// 定义动画内容
this.animation.height(100).step(),
// 导出动画数据传递给data层
this.animationData = this.animation.export()
} else {
this.open = false;
this.animation.height(30).step()
this.animationData = this.animation.export()
}
},</pre>
<h3><em>总结和注意</em></h3>
<p>1.动画效果需创建和绑定</p>
<p>2.动画效果就和一个布尔值来操控</p>
<p>3.animation对象的方法列表可以阅读：（https://uniapp.dcloud.io/api/ui/animation?id=createanimation）</p>
<p>4.animation对象中的height，width之类是px为单位我们在输入时候需要在upx像素之间换算（2upx = 1px）</p>
<p><img src="http://dingyue.ws.126.net/2022/0421/7a482dd0j00ranzck0020c001uo00tym.jpg"></p>
<p>5.必要存在动画传递发给data层</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic">this.animationData = this.animation.export()</pre>
<h3><em>案例代码</em></h3>
<pre class="EnlighterJSRAW" data-enlighter-language="generic"><template>
<view class="op" :animation="animationData" @tap="openTap()"></view>
</template>
<script>
export default{
data() {
return{
animationData: {},
open: false
}
},
// 生命周期,页面打开提前渲染
onShow: function(){
// 初始化一个动画
var animation = uni.createAnimation({
// 动画时间
duration: 1000,
// 动画速度
timingFunction: 'linear',
})
// 存在return字段中
this.animation = animation
},
methods:{
openTap() {
console.log(this.open)
if (this.open == false ) {
this.open = true;
// 定义动画内容
this.animation.height(100).step(),
// 导出动画数据传递给data层
this.animationData = this.animation.export()
} else {
this.open = false;
this.animation.height(30).step()
this.animationData = this.animation.export()
}
},
}
}
</script>
<style>
.op{
width: 100rpx;
height: 60rpx;
background-color: #007AFF;
margin: 100rpx auto;
}
</style></pre>
<p> </p>
</div>
</div>
<div data-block="true" data-editor="cro9a" data-offset-key="1lfjv-0-0">
<div class="rich-editor-image-container">
<div class="rich-editor-image"> </div>
</div>
</div>
<div data-block="true" data-editor="cro9a" data-offset-key="1k6qj-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="1k6qj-0-0"> </div>
</div>
<div data-block="true" data-editor="cro9a" data-offset-key="95bi8-0-0">
<div class="rich-editor-image-container">
<div class="rich-editor-image"> </div>
</div>
</div>
<div data-block="true" data-editor="cro9a" data-offset-key="887t9-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="887t9-0-0"><span data-offset-key="887t9-0-0"> </span></div>
</div><br><br>
来源：https://www.cnblogs.com/ericyuan/p/16172669.html
頁:
[1]