浅谈vi-motion小程序运动组件的内部原理

最新推荐文章于 2023-05-19 16:45:07 发布

置顶

asher sun

最新推荐文章于 2023-05-19 16:45:07 发布

阅读量294

点赞数

分类专栏：小程序开发文章标签：小程序前端 web visionUI

本文链接：https://blog.csdn.net/m0_37886286/article/details/84678370

版权

本文探讨了vi-motion组件的内部原理，它利用animate库解决小程序复杂运动问题。组件专注于动画，不提供UI，适用于授权、儿童和抽奖类项目。文章详细介绍了DOM结构设计，包括slot插槽，以及组件行为开发，如接口定义、动画控制，并讨论了如何处理点击事件和样式扩展。组件使用animate库，但不支持所有css3动画。

摘要由CSDN通过智能技术生成

vi-motion 组件介绍

vi-motion组件的内部运动是css3动画，使用的是animate开源动画库

vi-motion的出现是为了解决小程序开发时的复杂运动会话框。让开发不必把精力放在复杂的动画运动上，使其更加关注业务逻辑

组件文档：vi-motion

github仓库：VisionUI, 欢迎 start 或 issues

明确组件需求及使用场景

复杂的运动会话弹窗
多适用于授权弹窗、儿童类小程序项目、抽奖类小程序项目等
只定制运动动画，不提供任何UI界面

DOM结构设计

在上一步我们清楚的知道了组件的使用场景以及一些需要对外提供的接口

那么DOM结构(wxml)应该怎么设计呢？

既然这是一个运动类的会话弹窗，那么DOM结构与普通的会话弹窗是差不多的。一个根元素下面包含两个子元素。其中一个子元素为弹窗的mask遮罩层，一个元素是用来装载与用户的对话内容。

但是，该组件只是提供弹窗的运动方式，而不会提供弹窗的基本交互UI。所以，需要定义一个 slot 插槽用来接收开发者提供的对话UI界面

组件的内部DOM结构(wxml)

isShow 是用来控制组件的显示与隐藏

maskIsHide 用来控制遮罩层的显示与隐藏

maskColor 用来定义遮罩层的颜色

enterAnimateName 用来控制组件出现时候的动画

outAnimateName 用来控制组件隐藏时候的动画

animationDuration 用来控制动画运动的时间

<view wx:if="{
    {isShow}}" class="vi-dialog">
  <view 
  	class="vi-dialog-mask" 
  	wx:if="{
    {!maskIsHide}}" 
  	data-sign="mask" 
  	capture-catch:tap="triggerToHide" 
  	style="background-color: {
      {
      maskColor}}">
  </view>
  <view 
  	class="animated {
    {ishide ? enterAnimateName : outAnimateName}} container-calss" 
  	style="animation-duration: {
      {
      animationDuration}}s">
   		<slot></slot>
  </</