WeChat 미니 프로그램 개발 칼럼에서는 미니 프로그램의 애니메이션 팝업 상자/프롬프트 상자를 사용자 정의하는 방법을 소개합니다.
머리말
미니 프로그램에서 사용자가 인터페이스와 상호작용할 때 다음과 같은 사용자 피드백 프롬프트가 있습니다. , 상단에서 팝업 등
요즘 기성 UI 라이브러리가 구현되어 있지만, 세 번째 항목을 참조하지 않고 하단 팝업 상자나 사용자 정의 프롬프트 상자만 구현하는 경우도 있습니다. -party UI library
수동 및 기본 구현 방법 가장 중요한 것은 애니메이션 구현 방법
css3 애니메이션 구현 방법
은 wxml
코드 wxml
代码
<view> <view class="click-btn" catchtap="onBottomBox">弹出底部弹出框</view> <view class="click-btn" bindtap="onTopBox">弹出顶部提示框</view> <view wx:if="{{isBottom}}" class="bottom-box"> <div class="mask" bindtap="onHideBox"></div> <div class="pop">底部弹出内容</div> </view> <div wx:if="{{isTop}}" class="top-box">通知内容</div> </view>
/* pages/customalertbox/customalertbox.wxss */ .click-btn { width: 120px; height: 40px; line-height: 40px; text-align: center; margin: 20px auto; border: 1px solid #ccc; border-radius: 5px; } .top-box { width: 100%; height: 30px; background: #f56c6c; border-radius: 0 0 8px 8px; color: #fff; text-align: center; line-height: 30px; font-size: 28rpx; position: absolute; top: 0px; left: 0; animation-duration: 0.5s; animation-name: slidetop; } .mask { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.5); } .pop { position: absolute; width: 100%; height: 180px; background: #42b983; border-radius: 8px 8px 0 0; position: absolute; bottom: 0px; animation-duration: 0.5s; animation-name: slidein; } @keyframes slidein { from { transform: translateY(70%); } to { transform: translateY(0); } } @keyframes slidetop { from { transform: translateY(-30px); } to { transform: translateY(0px); } }
// pages/customalertbox/customalertbox.js Page({ /** * 页面的初始数据 */ data: { isBottom: false, isTop: false, }, /** * 生命周期函数--监听页面加载 */ onLoad: function(options) {}, onBottomBox() { this.setData({ isBottom: true, }); }, onHideBox() { this.setData({ isBottom: false, }); }, onTopBox() { this.setData({ isTop: true, }); setTimeout(() => { this.setData({ isTop: false, }); }, 2000); }, });
.pop { /* ... */ animation-duration: 0.5s; animation-name: slidein; // 动画的名称 } @keyframes slidein { // 定义动画的名称 from { transform: translateY(70%); // 平移,垂直方向上 } to { transform: translateY(0); } } .top-box { /* ... */ animation-duration: 0.5s; animation-name: slidetop; } @keyframes slidetop { from { transform: translateY(-30px); } to { transform: translateY(0px); } }
通过 css3
中的@keyframes
以及变换transform
,垂直方向上平移,实现动画
示例效果如下所示
掘金不支持gif-实例效果可戳链接
以上是通过css3
的动画animation
结合@keyframes
<view> <view class="click-btn" bindtap="onBottomBox">弹出底部弹出框</view> <view class="click-btn" bindtap="onTopBox">弹出顶部提示框</view> <view wx:if="{{isBottom}}" style="position: absolute;width: 100%;height: 100%;bottom: 0px;" > <div class="mask" bindtap="onHideBox"></div> <div class="pop" animation="{{animationData}}">底部弹出内容</div> </view> <div wx:if="{{isTop}}" class="top-box">通知内容</div> </view>
// pages/customalertbox/customalertbox.js Page({ /** * 页面的初始数据 */ data: { isBottom: false, isTop: false, animationData: {}, // 定义动画对象 }, /** * 生命周期函数--监听页面加载 */ onLoad: function(options) {}, onBottomBox() { // 创建动画 var animation = wx.createAnimation({ duration: 2000, timingFunction: 'ease', }); this.animation = animation; // 先在y轴偏移180,然后用step()完成一个动画 animation.translateY(180).step(); this.setData({ animationData: animation.export(), isBottom: true, }); // 设置setTimeout来改变y轴偏移量,实现有感觉的滑动,回到初始位置 setTimeout(() => { animation.translateY(0).step(); this.setData({ animationData: animation.export(), }); }, 200); }, // 点击遮罩层隐藏弹框 onHideBox() { var animation = wx.createAnimation({ duration: 2000, timingFunction: 'ease', }); this.animation = animation; // 先在y轴偏移180,然后用step()完成一个动画 animation.translateY(180).step(); this.setData({ animationData: animation.export(), }); setTimeout(() => { animation.translateY(0).step(); this.setData({ animationData: animation.export(), isBottom: false, }); }, 200); }, onTopBox() { this.setData({ isTop: true, }); setTimeout(() => { this.setData({ isTop: false, }); }, 2000); }, });
<view> <view class="click-btn" bindtap="onBottomBox">弹出底部弹出框</view> <view catchtouchmove="true" wx:if="{{isBottom}}" style="position: absolute;width: 100%;height: 100%;bottom: 0px;" > <div class="mask" bindtap="onHideBox"></div> <div class="pop" animation="{{animationData}}">底部弹出内容</div> </view> <div wx:if="{{isTop}}" class="top-box">通知内容</div> </view>rrreee by
css3
css3
애니메이션
小程序动画 API-实现动画
创建一个动画实例 animation
,调用实例的方法来描述动画。最后通过动画实例的 export
方法导出动画数据传递给组件的 animation
属性
示例效果如下所示
掘金不支持gif-实例效果可戳链接
如下是实例代码
<view>
<view class="click-btn" bindtap="onBottomBox">弹出底部弹出框</view>
<view class="click-btn" bindtap="onTopBox">弹出顶部提示框</view>
<view
wx:if="{{isBottom}}"
style="position: absolute;width: 100%;height: 100%;bottom: 0px;"
>
<div class="mask" bindtap="onHideBox"></div>
<div class="pop" animation="{{animationData}}">底部弹出内容</div>
</view>
<div wx:if="{{isTop}}" class="top-box">通知内容</div>
</view>
主要是给想要添加动画的元素添加了一个animation
属性,现在的动画是通过js去控制,而非css
如下代码所示
// pages/customalertbox/customalertbox.js
Page({
/**
* 页面的初始数据
*/
data: {
isBottom: false,
isTop: false,
animationData: {}, // 定义动画对象
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {},
onBottomBox() {
// 创建动画
var animation = wx.createAnimation({
duration: 2000,
timingFunction: 'ease',
});
this.animation = animation;
// 先在y轴偏移180,然后用step()完成一个动画
animation.translateY(180).step();
this.setData({
animationData: animation.export(),
isBottom: true,
});
// 设置setTimeout来改变y轴偏移量,实现有感觉的滑动,回到初始位置
setTimeout(() => {
animation.translateY(0).step();
this.setData({
animationData: animation.export(),
});
}, 200);
},
// 点击遮罩层隐藏弹框
onHideBox() {
var animation = wx.createAnimation({
duration: 2000,
timingFunction: 'ease',
});
this.animation = animation;
// 先在y轴偏移180,然后用step()完成一个动画
animation.translateY(180).step();
this.setData({
animationData: animation.export(),
});
setTimeout(() => {
animation.translateY(0).step();
this.setData({
animationData: animation.export(),
isBottom: false,
});
}, 200);
},
onTopBox() {
this.setData({
isTop: true,
});
setTimeout(() => {
this.setData({
isTop: false,
});
}, 2000);
},
});
以上就是通过微信小程序中动画API
实现的完成的动画,代码要比 css3
要多一些,可以实现更加复杂的动画效果
注意
如果是底部弹出框,拖动里面时,若遮罩层底部会跟着滚动,具体解决办法也可以在外层添加catchtouchmove="true"
即可解决
<view>
<view class="click-btn" bindtap="onBottomBox">弹出底部弹出框</view>
<view
catchtouchmove="true"
wx:if="{{isBottom}}"
style="position: absolute;width: 100%;height: 100%;bottom: 0px;"
>
<div class="mask" bindtap="onHideBox"></div>
<div class="pop" animation="{{animationData}}">底部弹出内容</div>
</view>
<div wx:if="{{isTop}}" class="top-box">通知内容</div>
</view>
结语
在小程序当中实现动画可以用css3的animation结合@keyframes实现,同样也可以通过小程序动画的api去实现
相关免费学习推荐:微信小程序开发
위 내용은 애니메이션 팝업 상자/프롬프트 상자를 사용자 정의하여 미니 프로그램 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

에디트플러스 중국어 크랙 버전
작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

Atom Editor Mac 버전 다운로드
가장 인기 있는 오픈 소스 편집기
