uniapp 点击动画_如何在uni-app 中使用动画-animation

如何在uni-app 中使用动画-animation

1.dom元素中添加:animation="animationData"

:animation="animationData">

2.js中相应添加

export default {

data() {

return {

pageY: 0, //触摸点

offsetTop: 0, //偏移量

newTop: 200,

show: false,

animationData: {},

off: false

};

},

onLoad() {},

onShow() {

// 初始化一个动画

var animation = uni.createAnimation({

transformOrigin: "ease-in",

duration: 100, //动画持续1秒

// timingFunction: 'linear', //linear 全程匀速运动

// delay:300 //延迟两秒执行动画

})

this.animation = animation

},

methods: {

touchendTest() {

// console.log('开始回弹动画');

this.newTop = 200;

this.scaleAndScale()

}

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniapp是一款基于Vue.js的跨平台应用框架,支持同时开发iOS、Android和H5等多个平台的应用程序。而高德地图App是一款地图应用程序,提供了地图、导航、定位等功能。本文将介绍如何在uniapp使用高德地图App完成车辆轨迹动画。 1.安装高德地图插件 在uniapp项目使用高德地图,需要先安装uni-app插件,可以在插件市场搜索“高德地图插件”进行安装。 安装完成后,在项目的manifest.json添加以下配置: ``` "permissions":{ "scope.userLocation": { "desc": "获取当前位置信息及地图功能" } }, "sitemapLocation":"sitemap.json", "app-plus": { "modules": { "AMap": "uni-AMap", "AMapUI": "uni-AMapUI" }, "appid": "" } ``` 2.创建地图 在页面创建地图组件,代码如下: ``` <template> <view class="map"> <map :longitude="longitude" :latitude="latitude" :markers="markers"></map> </view> </template> <script> export default { data() { return { longitude: 116.397428, latitude: 39.90923, markers: [{ id: 1, longitude: 116.397428, latitude: 39.90923, iconPath: '/static/location.png', width: 50, height: 50, title: '当前位置' }] } } } </script> ``` 3.添加动画 在页面添加动画,代码如下: ``` <template> <view class="map"> <map :longitude="longitude" :latitude="latitude" :markers="markers"></map> <view class="button" @click="startAnimation">开始动画</view> </view> </template> <script> export default { data() { return { longitude: 116.397428, latitude: 39.90923, markers: [{ id: 1, longitude: 116.397428, latitude: 39.90923, iconPath: '/static/location.png', width: 50, height: 50, title: '当前位置' }], animation: null } }, methods:{ startAnimation(){ const animation = uni.createAnimation({ duration: 10000, timingFunction: 'linear' }) animation.translate(100, 100).step() this.markers[0].animation = animation.export() this.animation = animation } } } </script> ``` 4.运行程序 在HBuilder X运行程序,点“开始动画”按钮即可看到车辆轨迹动画。 以上就是在uniapp使用高德地图App完成车辆轨迹动画的步骤。通过使用高德地图插件和uniapp框架,我们可以很方便地实现地图功能和动画效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值