提交 a5fe7b88 编写于 作者: DCloud-yyl's avatar DCloud-yyl

animation-view添加本地和网络动画切换示例

上级 39c66afa
{ {
"name" : "uni-component", "name" : "uni-component",
"appid" : "__UNI__0094991", "appid" : "__UNI__0094991",
"description" : "", "description" : "uts组件示例",
"versionName" : "1.0.0", "versionName" : "1.0.0",
"versionCode" : "100", "versionCode" : "100",
"transformPx" : false, "transformPx" : false,
......
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
:hidden="hidden" @bindended="lottieEnd"> :hidden="hidden" @bindended="lottieEnd">
</animation-view> </animation-view>
<button @click="playLottie" type="primary">{{status}}lottie动画</button> <button @click="playLottie" type="primary">{{status}}lottie动画</button>
<button @click="changeLottie" type="primary">切换{{location}}动画</button>
</div> </div>
</template> </template>
...@@ -14,9 +15,10 @@ ...@@ -14,9 +15,10 @@
path: '/uni_modules/uni-animation-view/static/lottie.json', path: '/uni_modules/uni-animation-view/static/lottie.json',
loop: false, loop: false,
autoplay: false, autoplay: false,
action: 'play', action: 'stop',
hidden: false, hidden: false,
status: '暂停' status: '播放',
location: '网络'
} }
}, },
methods: { methods: {
...@@ -24,6 +26,13 @@ ...@@ -24,6 +26,13 @@
this.action = ('play' !== this.action) ? 'play' : 'pause'; this.action = ('play' !== this.action) ? 'play' : 'pause';
this.status = ('pause' === this.action) ? '播放' : '暂停'; this.status = ('pause' === this.action) ? '播放' : '暂停';
}, },
changeLottie() {
this.action = 'stop';
this.status = '播放';
this.path = ('网络' === this.location) ? 'https://native-res.dcloud.net.cn/uni-app/static/lottie.json' : '/uni_modules/uni-animation-view/static/lottie.json';
this.location = ('网络' === this.location) ? '本地' : '网络';
console.log('path='+this.path);
},
lottieEnd() { lottieEnd() {
this.status = '播放'; this.status = '播放';
this.action = 'stop'; this.action = 'stop';
...@@ -37,7 +46,7 @@ ...@@ -37,7 +46,7 @@
.animation { .animation {
width: 750rpx; width: 750rpx;
height: 300rpx; height: 300rpx;
background-color: #FF0000; background-color: #CCCCCC;
margin-bottom: 20px; margin-bottom: 20px;
} }
</style> </style>
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册