uni-app组件浮动动画

使用uni-app时，往往有增加动画效果的需求，这里提供一个在h5以及app端可以良好运行的组件浮动动画。

     /*** 设置一个浮动效果，需要给元素绑定:animation="upgradeAnimation" 这类动画效果* @param {Object} field 在this中定义的动画变量* @param {Object} scope 波动范围* @param {Object} time 一轮动画的时间*/setFloatAnimation(field, scope = 9, time = 2000) {let singleTime = time / 2  //单个方向的运动时间let animation = uni.createAnimation()const interval = ()=> {animation.translateY(-scope).step({duration: singleTime})this[field] = animation.export()setTimeout(() => {animation.translateY(0).step({duration: singleTime})this[field] = animation.export()}, singleTime + 100)return interval // 自我调用一次}//额外增加200秒的周期时间，以避免app动画卡顿的问题setInterval(interval(), time + 200)},

使用示例：

<template><view :animation="animation" style="margin-top: 100rpx;">坚韧白金</view>
</template><script>export default {data() {return {animation:null};},onLoad() {this.setFloatAnimation("animation")},methods: {/*** 设置一个浮动效果，需要给元素绑定:animation="animation" 这类动画效果* @param {Object} field 在this中定义的动画变量* @param {Object} scope 波动范围* @param {Object} time 一轮动画的时间*/setFloatAnimation(field, scope = 9, time = 2000) {let singleTime = time / 2  //单个方向的运动时间let animation = uni.createAnimation()const interval = ()=> {animation.translateY(-scope).step({duration: singleTime})this[field] = animation.export()setTimeout(() => {animation.translateY(0).step({duration: singleTime})this[field] = animation.export()}, singleTime + 100)return interval // 自我调用一次}setInterval(interval(), time + 200)}}}
</script>

效果图：

uni-app组件浮动动画相关推荐

XamarinAndroid组件教程RecylerView动画组件使用动画(3)
XamarinAndroid组件教程RecylerView动画组件使用动画(3) (8)打开Main.axml文件,构建主界面.代码如下: <?xml version="1.0&quo ...
XamarinAndroid组件教程RecylerView动画组件使用动画(2)
XamarinAndroid组件教程RecylerView动画组件使用动画(2) 如果开发者要为RecylerView的子元素添加动画效果,需要使用RecyclerView类中的SetItemAnim ...
切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
sketch放入app组件_使用Sketch App设计CSS网格
sketch放入app组件首先定义您的网格 (Start by defining your grid) Sketch has 2 built-in layout features - Layout ...
uni app map 地图漂浮问题及方案
uni app map 地图漂浮问题及方案文章页有图片导致的问题,图片没加载出来,导致文章内容高度不固定,如果图片没加载出来,高度就是0,如果此时开始加载map,那么map就在那里加载,map原生 ...
uni app中使用图表
关于在uni app中运用图表今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...
uni app 自动化索引列表
uni app 自动化索引列表,官方推荐的第三方插件 https://ext.dcloud.net.cn/plugin?id=375 [{"letter": "A&quo ...
uni app 视频播放功能
视频播放功能,需求:编译成纯h5网页,运行在任意容器里,如浏览器.安卓原生和iOS等媒体组件video 首先使用video组件,然后高度需要自己设置 uni.createVideoContext 官 ...
uni app 开发微信小程序及上线体验
uni app 开发微信小程序及上线体验项目创建及微信小程序AppId的申请本次开发的是电商类的微信小程序,这里用到的是HBuilderX这个编辑器.之前用的Visual Studio Code ...

uni-app组件浮动动画

uni-app组件浮动动画相关推荐

最新文章

热门文章