지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 위챗 애플릿 > 미니 프로그램 개발 > 본문

애니메이션 팝업 상자/프롬프트 상자를 사용자 정의하여 미니 프로그램 구현

coldplay.xixi
풀어 주다： 2020-10-27 17:45:03
앞으로
2274명이 탐색했습니다.

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: &#39;ease&#39;,
    });

    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: &#39;ease&#39;,
    });
    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: &#39;ease&#39;,
    });

    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: &#39;ease&#39;,
    });
    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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
小程序
원천：juejin.im
이전 기사：WeChat에서 누군가를 쓰다듬는다는 것은 무엇을 의미합니까? 다음 기사：WeChat 미니 프로그램 로그인의 프런트 엔드 디자인 및 구현 이해
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
Javafx에서 인라인 CSS 스타일을 동적으로 수정합니다. 응용프로그램이 최대화되었을 때 창의 배경 이미지를 변경하려고 합니다. 내 배경은 인라인 CSS를 사용하여 설정됩니다. 스타일에 대해 두 개의 다른 변수와 if 문...
에서 2024-04-06 20:57:16
0
1
487
웹 애플리케이션에 버전 정보를 표시하는 모범 사례는 무엇입니까? 웹 애플리케이션을 개발 중입니다. 웹 애플리케이션에 버전 정보를 표시하는 모범 사례는 무엇입니까? 저는 semantic versioning을 사용하고 있고 이미 ...
에서 2024-04-06 19:13:16
0
2
476
흰색으로 설정된 HR 태그가 반투명한 이유는 무엇입니까? 나는 HTML(부트스트랩 포함)과 CSS를 가지고 있습니다. 내 HTML에는 클래스가 있는 <hr> 태그가 있고 CSS에는 테두리 스타일이 있습니다. ...
에서 2024-04-06 16:13:26
0
1
500
React를 사용하여 Go 서버에서 쿠키 데이터를 가져올 수 없습니다 React 이후 백엔드로 이동하기 시작했고 백엔드 서버에 githubOAUTH와 세션을 추가하여 데이터를 저장했습니다. 모두 백엔드에서 잘 작동하며 세션 등을 통...
에서 2024-04-06 13:09:26
0
1
384
Laravel 9.x의 일반 오류: 'id' 필드에 기본값이 없습니다. 내 앱에서 UUID를 사용하고 있으며 다음과 같이 온라인에 표시된 특성을 구현했습니다. traitUuid{protectedstaticfunctionboot():v...
에서 2024-04-06 11:12:54
0
1
350
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿