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

本文介绍了如何在uni-app中利用animation创建点击动画,包括添加动画到dom元素,初始化动画,以及定义不同的动画效果如translateY。在`touchstartTest`、`touchmoveTest`和`touchendTest`方法中处理用户交互,通过`scaleAndScale`和`rotateAndScale`方法改变动画数据,并通过`export()`导出到data层。注意在手机版本中可能存在的动画重复执行问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

如何在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()

},

touchstartTest(e) {

// console.log('点击触发动作');

this.newTop = 200;

this.pageY = e.changedTouches[0].pageY * 2;

},

touchmoveTest(e) {

// console.log('开始移动');

if (e.changedTouches[0].pageY * 2 - this.pageY < 200) {

this.newTop = 200;

return;

}

this.newTop = e.changedTouches[0].pageY * 2 - this.pageY;

if (this.newTop > 500) {

this.newTop = 500;

return;

}

},

scaleAndScale() {

if (this.off) {

// 使用动画

this.rotateAndScale()

} else {

this.norotateAndScale()

}

this.off = !this.off

},

rotateAndScale() {

// 定义动画内容 偏移

this.animation.translateY(-20).step()

this.animation.translateY(10).step()

this.animation.translateY(-5).step()

this.animation.translateY(0).step()

// 导出动画数据传递给data层

this.animationData = this.animation.export(); //每次执行导出动画时 会覆盖之前的动画

},

norotateAndScale() {

this.animation.translateY(-22).step()

this.animation.translateY(12).step()

this.animation.translateY(-7).step()

this.animation.translateY(0).step()

// 导出动画数据传递给data层

this.animationData = this.animation.export(); //每次执行导出动画时 会覆盖之前的动画

}

}

};

.content {

position: relative;

}

.test1 {

width: 750rpx;

height: 400rpx;

background-color: #007aff;

}

.test2 {

width: 750rpx;

height: 1900rpx;

background-color: #4cd964;

z-index: 20;

position: absolute;

}

.test3 {

margin-top: 500rpx;

width: 200rpx;

height: 200rpx;

background-color: #333;

animation: bounceInUp;

}

注:uniapp 运行在手机版本中会出现问题,相同动画只能运行一次

### uni-app 中 `uni-popup` 组件的使用方法 #### 1. 引入组件 在需要使用 `uni-popup` 的页面中,可以通过以下方式引入该组件: ```html <template> <view> <!-- 页面其他内容 --> <button type="primary" @click="openPopup">打开弹窗</button> <!-- 弹出层组件 --> <uni-popup ref="popup"> <view class="popup-content"> 这是一个简单的弹出窗口。 </view> </uni-popup> </view> </template> <script> import uniPopup from '@dcloudio/uni-ui/lib/uni-popup/uni-popup.vue'; export default { components: { uniPopup }, methods: { openPopup() { this.$refs.popup.open(); // 打开弹窗 } } }; </script> ``` 此代码展示了如何通过 `<uni-popup>` 标签引入并初始化组件[^1]。 --- #### 2. 控制弹出层的行为 `uni-popup` 提供了一些内置的方法用于控制其显示状态。例如,调用 `$refs.popup.open()` 方法可以展示弹出层;而调用 `$refs.popup.close()` 则可关闭它。 以下是完整的生命周期函数支持: - **`open(type)`**: 展示弹出层,默认方向为居中 (`center`),也可以指定参数调整位置(如顶部、底部等)。 - **`close()`**: 关闭当前弹出层。 这些功能可以根据实际业务逻辑动态触发[^2]。 --- #### 3. 自定义样式与交互 如果遇到弹窗内部内容较多的情况,可能会导致无法滚动的问题。此时可通过嵌套 `scroll-view` 来解决这一现象: ```html <template> <view> <button type="primary" @click="openPopup">打开带滚动条的弹窗</button> <uni-popup ref="popup"> <scroll-view scroll-y="true" style="height: 400px;"> <view v-for="(item, index) in dataList" :key="index" class="list-item"> {{ item }} </view> </scroll-view> </uni-popup> </view> </template> <script> export default { data() { return { dataList: Array.from({ length: 50 }, (_, i) => `项目 ${i + 1}`) }; }, methods: { openPopup() { this.$refs.popup.open(); } } }; </script> <style scoped> .list-item { padding: 10px; border-bottom: 1px solid #ccc; } </style> ``` 在此案例中,我们利用了 `scroll-view` 并设置属性 `scroll-y=true` 实现垂直滚动效果[^3]。 --- #### 4. 配置选项说明 除了基本操作外,还可以传递额外参数来自定义弹窗的表现形式。比如改变默认弹出的方向或者增加动画过渡时间等等。常见配置项如下表所示: | 参数名 | 类型 | 默认值 | 描述 | |--------------|----------|----------------|----------------------------------------------------------------------| | mode | String | center | 定义弹框出现的位置 (top/bottom/left/right/center),影响布局表现 | | maskClick | Boolean | true | 是否允许点击遮罩区域隐藏 | | animation | Boolean | false | 开启后会应用淡入淡出的效果 | 更多高级特性建议查阅官方文档获取最新资料[^2]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值