精华内容
下载资源
问答
  • 真正的微信小程序动画折叠面板,css动画实现 真正的微信小程序动画折叠面板,css动画实现 真正的微信小程序动画折叠面板,css动画实现 真正的微信小程序动画折叠面板,css动画实现
  • 讲解微信小程序中如何使用css的动画规则,也就是keyframes规则和animation属性来实现小程序中的相关动画
  • 微信小程序 动画 放大 改变透明度
  • 微信小程序实现animation动画,具体内容如下 1. 创建动画实例 wx.createAnimation(OBJECT) 创建一个动画实例animation。调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的...
  • 主要介绍了微信小程序循环动画效果的实现方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 主要介绍了微信小程序动画Animation执行过程 / 实现过程 / 实现方式,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 微信小程序重复动画

    2018-02-21 22:25:20
    微信小程序 重复动画 重复旋转源码 简洁 适用初学者微信小程序 重复动画 重复旋转源码 简洁 适用初学者
  • 本项目是为一套简单的小程序动画库 整体实现参考的cocos,API设置参考了cocos和laya 目前只支持本地图片和label渲染,后面有空再添加
  • 在知道有 animation-play...恢复一个已暂停的动画,将从它开始暂停的时候,而不是从动画序列的起点开始在动画。 在MDN文档中了解到,这是一个实验中的功能,但是其作用还是强大的。既可以控制/获取元素的动画状态(pau
  • 之前一直使用堪称“万能”的jQuery处理用户交互的动画,近日开发微信小程序微信小程序高度限制的语法和功能使开源函数可谓对其“无能为力”。 那没办法,只好自己写一个可以让元素渐入渐出的,可复用的函数了。...
  • 在看了微信开发文档后,发现微信小程序提供了Animation的一个动画对象,具体看了里面的参数后发现,是可以实现需求上的效果的。具体使用如下api: wx.createAnimation(Object object) 创建一个anima
  • 主要介绍了微信小程序 Animation实现图片旋转动画示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 最近做小程序时,会经常用到各种弹框。直接做显示和隐藏虽然也能达到效果,但是体验性太差,也比较简单粗暴。想要美美地玩,添加点动画还是非常有必要的。下面做一个底部上滑的弹框菜单。
  • 最近在研究小程序,搜集整理而来共计78种自定义动画,现分享给大家,并且写成demo,读者可通过体验获取想要的效果,复制粘贴使用,希望能共同学习。博客中有使用方法
  • 微信小程序wepy框架点赞动画插件
  • 微信小程序动画

    2020-09-14 10:39:10
    如果你的微信小程序项目基于 nodejs 开发,你可以使用 npm 安装,并拷贝到相关目录后 @import npm install ripples.wxss --save 直接 clone 或 download 仓库https://github.com/jeasonstudio/Ripples.wxs

    在pc端和移动端有很多方便使用的动画库,比较出名的是 Animate.css
    今天给大家介绍一个小程序端的动画库,使用起来非常方便,效果也还不错其中大部分动画的来源于Animate.css

    首先安装

    • 如果你的微信小程序项目基于 nodejs 开发,你可以使用 npm 安装,并拷贝到相关目录后 @import
    npm install ripples.wxss --save
    
    • 直接 clone 或 download 仓库https://github.com/jeasonstudio/Ripples.wxss.git,拷贝 ripples.wxss 或 ripples.min.wxss到相关目录后 @import

    使用

    1. 首先在你想引入 Ripples.wxss 动效的 element 上加 ripple class。
    2. 如果你想让他循环不断播放,请添加 infinite class。
    <view class="ripple infinite bounce">element</view>
    

    其中这个动画的名字可以直接参考 Animate.css


    控制

    如果你想控制动画的出现或停止可以参考以下示例

    <view class="ripple {{bounceShow ? bounce:''}}">bounce</view>
    
    Page({
       data: {
           bounceShow: false
       },
       showBounce: function () {
       	let that = this
           that.setData({
               bounceShow: true
           })
           setTimeout(function() {
               that.setData({
                   bounceShow: false
           }, 2000)
       })
    }}
    
    展开全文
  • 一个微信小程序animation动画卡片效果,原本是从一个鲜花订购的微信小程序中借鉴而来,用来实现UI的动画效果,将源代码分享给大家学习研究,示例最终效果如演示截图所示。
  • 主要介绍了微信小程序动画(Animation) 的实现及执行步骤,需要的朋友可以参考下
  • 主要介绍了微信小程序动画组件,类似vue,且更强大使用解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 微信小程序 连续旋转动画 一、.js中封装旋转动画方法  添加animation属性 data:{ animation:'' }  改变animation的值(官网提供角度范围是-180~180,但是我发现角度越大会一直旋转) onShow: function() { ...
  • 微信小程序动画效果 最近一直在做小程序开发,在官方文档中无意间看到过渡动画效果,我就有点小激动,用每一个开发框架的时候我都最先研究动画和过渡 闲来无事写了一个小demo <!--wxml代码--> <view class=...

    微信小程序动画效果

    最近一直在做小程序开发,在官方文档中无意间看到过渡动画效果,我就有点小激动,用每一个开发框架的时候我都最先研究动画和过渡

    闲来无事写了一个小demo

    <!--wxml代码-->
    <view class="wrapper">
        	<!-- 微信小程序开发功能获取用户头像userAvatarUrl -->
            <view class="headerImage" catchtap="imageAnimation"  animation="{{animationData}}">
                <open-data type="userAvatarUrl" ></open-data>
            </view>
     		<!-- 微信小程序开发功能获取用户昵称userNickName -->
             <view class="headertext">
                <open-data type="userNickName" class="headertext"></open-data>
            </view>
            
    </view>
    
    /*wxss代码*/
    .wrapper {
      background: gold;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 500rpx;
    }
    
    .headerImage {
      width: 200rpx;
      height: 200rpx;
      margin-bottom: 40rpx;
    }
    
    .headertext {
      font-size: 40rpx;
    }
    
    //js
    const app = getApp()
    const computedBehavior = require('miniprogram-computed')//不用理会,这事引入的计算属属性
    Component({
      behaviors: [computedBehavior],)//不用理会,这事引入的计算属属性
      data: {
        //初始化
        animationData: "",
    
      },
    
      methods: {
        imageAnimation() {
          var animation = wx.createAnimation({
    
            duration: 4000,
            timingFunction: "ease",
            delay: 0,
            transformOrigin: "50% 50%",
    
          })
          // animation.rotate(360).step();     //旋转9
          //animation.scale(1.5).step();        //放大
          // animation.translate(0,200).step(); //偏移
          // animation.skew(30,50).step();      //倾斜x,y
          // animation.rotate(45).scale(0.8).translate(10,10).step() //同时执多个效果
          this.setData({
            animationData: animation.export(), //赋值
          })
    
        },
    
      },
      computed: {
    
      },
    })
    
    展开全文
  • 微信小程序——简易动画案例 wxml: 我在做动画 <button type=primary bindtap=translate>旋转</button> js: //js Page({ data: { }, onReady: function () { // 页面渲染完成 //实例化一个...
  • 微信小程序/实现流星雨背景动画 主要使用css3动画实现流星雨动画 使用js随机数来实现流星出现位置及流星出现数量 主要功能 1:流星雨 2:背景音乐/暂停/播放 下载dome git clone 微信开发者工具中导入项目,选取测试...
  • wxDraw 一个轻量级的微信小程序2d动画绘制库
  • 微信小程序动画之消息框弹出

    万次阅读 2019-05-30 13:17:13
    微信小程序动画之消息框弹出 上图 js: Page({ data: { showModalStatus: false }, powerDrawer: function(e) { var currentStatu = e.currentTarget.dataset.statu; this.util(currentStatu) }, util: ...

    微信小程序动画之消息框弹出

    上图
    在这里插入图片描述
    js:

    Page({
      data: {
        showModalStatus: false
      },
      powerDrawer: function(e) {
        var currentStatu = e.currentTarget.dataset.statu;
        this.util(currentStatu)
      },
      util: function(currentStatu) {
        /* 动画部分 */
        // 第1步:创建动画实例   
        var animation = wx.createAnimation({
          duration: 300, //动画时长  
          timingFunction: "linear", //线性  
          delay: 0 //0则不延迟  
        });
    
        // 第2步:这个动画实例赋给当前的动画实例  
        this.animation = animation;
    
        // 第3步:执行第一组动画  
        animation.opacity(0).rotateY(100).step();
    
        // 第4步:导出动画对象赋给数据对象储存  
        this.setData({
          animationData: animation.export()
        })
    
        // 第5步:设置定时器到指定时候后,执行第二组动画  
        setTimeout(function() {
          // 执行第二组动画  
          animation.opacity(1).rotateY(0).step();
          // 给数据对象储存的第一组动画,更替为执行完第二组动画的动画对象  
          this.setData({
            animationData: animation
          })
    
          //关闭  
          if (currentStatu == "close") {
            this.setData({
              showModalStatus: false
            });
          }
        }.bind(this), 200)
    
        // 显示  
        if (currentStatu == "open") {
          this.setData({
            showModalStatus: true
          });
        }
      }
    
    })
    

    wxml:

    <!--button-->
    <view class="btn bubble" bindtap="powerDrawer" data-statu="open">登录</view>
    
    <!--mask-->
    <view class="drawer_screen" bindtap="powerDrawer" data-statu="close" wx:if="{{showModalStatus}}"></view>
    <!--content-->
    <!--使用animation属性指定需要执行的动画-->
    <view animation="{{animationData}}" class="drawer_box" wx:if="{{showModalStatus}}">
    
      <!--drawer content-->
      <view class="drawer_title">消息框</view>
      <view class="drawer_content">
      </view>
      <view class="btn_ok" bindtap="powerDrawer" data-statu="close">确定</view>
    </view>
    

    wxss:

    /*button*/
    
    .btn {
      width: 80%;
      padding: 20rpx 0;
      border-radius: 10rpx;
      text-align: center;
      margin: 40rpx 10%;
      background: #07c160;
      color: #fff;
    }
    
    /*mask*/
    
    .drawer_screen {
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1000;
      background: #000;
      opacity: 0.4;
      overflow: hidden;
    }
    
    /*content*/
    
    .drawer_box {
      width: 650rpx;
      overflow: hidden;
      position: fixed;
      top: 50%;
      left: 0;
      z-index: 1001;
      background: #fafafa;
      margin: -150px 50rpx 0 50rpx;
      border-radius: 3px;
    }
    
    .drawer_title {
      padding: 15px;
      font: 20px "microsoft yahei";
      text-align: center;
    }
    
    .text {
      font: 20px "microsoft yahei";
      text-align: center;
    }
    
    .drawer_content {
      height: 80px;
      overflow-y: scroll; /*超出父盒子高度可滚动*/
    }
    
    .btn_ok {
      padding: 10px;
      font: 20px "microsoft yahei";
      text-align: center;
      border-top: 1px solid #e8e8ea;
      color: #3cc51f;
    }
    
    .bottom {
      padding-bottom: 20px;
    }
    
    .bubble {
      position: relative;
      overflow: hidden;
    }
    
    .bubble:after {
      content: "";
      background: #999;
      position: absolute;
      width: 750rpx;
      height: 750rpx;
      left: calc(50% - 375rpx);
      top: calc(50% - 375rpx);
      opacity: 0;
      margin: auto;
      border-radius: 50%;
      transform: scale(1);
      transition: all 0.4s ease-in-out;
    }
    
    .bubble:active:after {
      transform: scale(0);
      opacity: 1;
      transition: 0s;
    }
    
    

    emmmm最后
    https://blog.csdn.net/michael_ouyang
    谢谢这位大佬的博客,学到了好多!

    展开全文
  • 微信小程序动画效果CSS---有效果图

    千次阅读 2020-10-24 17:21:39
    } /* 从头到尾速度相同 linear 动画无限次播放 infinite 动画轮流反向播放 alternate 低速开始和结束 ease-in-out */ /* 左右滚动 */ .scroll{ width: 100px; height: 100px; background-color:red; animation:...

    效果图如下所示

    在这里插入图片描述

    不懂得可以看注释 都有说明 主要就是理解怎么用 你会用出什么效果

    .wxml

    <view class="scroll"></view>
    <image class="borimg" src="http://5b0988e595225.cdn.sohucs.com/q_70,c_zoom,w_640/images/20180402/e58cbe3035f343c082557b42a00e4d2e.jpeg"></image>
    <image class="bormax" src="http://img2.imgtn.bdimg.com/it/u=1249633517,2092238595&fm=26&gp=0.jpg"></image>
    <view class="fanzhuan"></view>
    <!-- load1 -->
    <view class="load1">
      <view class="rect1"></view>
      <view class="rect2"></view>
      <view class="rect3"></view>
      <view class="rect4"></view>
      <view class="rect5"></view>
    </view>
    

    .wxss

    page{
      width: 100%;
      padding-bottom: 100px;
    }
    view{
      box-sizing: border-box;
    }
    /* 从头到尾速度相同 linear
       动画无限次播放   infinite
       动画轮流反向播放 alternate
       低速开始和结束 ease-in-out	
    */
    /* 左右滚动 */
    .scroll{
      width: 100px;
      height: 100px;
      background-color:red;
      animation:scroll alternate linear infinite 1.5s;
    }
    @keyframes scroll{
      from {
        margin-left: 0%;
      }
      to {
        margin-left: calc(100% - 100px);
      }
    }
    /* 无线旋转(360) */
    .borimg{
      width: 100px;
      height: 100px;
      border-radius: 50%;
      margin: 50rpx calc((100% - 100px) / 2)  0 calc((100% - 100px) / 2);
      animation: borimg linear infinite 5s;
    
    }
    @keyframes borimg{
      from{
        transform:rotate(-360deg);
      }
      to{
        transform:rotate(360deg);
      }
    }
    /* 放大图片 */
    .bormax{
      width:300px;
      height:300px;
      margin: 50rpx calc((100% - 300px) / 2)  0 calc((100% - 300px) / 2);
      animation: bormax infinite 1.5s;
    }
    @keyframes bormax{
      from{
        transform: scale(0.7);
      }
      to{
        transform: scale(1);
      }
    }
    /* 无线反转 */
    .fanzhuan{
      width:60px;
      height:60px;
      margin: 50rpx calc((100% - 60px) / 2)  0 calc((100% - 60px) / 2);
      background-color:#67CF22;
      animation: fanzhuan infinite 1.2s;
    }
    @keyframes fanzhuan{
      0% {
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
      } 
      50% {
        transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
      } 
      100% {
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
      }
    }
    /* load1 */
    .load1 {
      width: 50px;
      height: 60px;
      margin: 50rpx calc((100% - 50px) / 2)  0 calc((100% - 50px) / 2);
    }
    .load1>view{
      background-color: #67CF22;
      height: 100%;
      width: 6px;
      float: left;
      margin-right: 4px;
      animation: stretchdelay 1.2s infinite ease-in-out;
    }
    .load1>.rect2{
      animation-delay: -1.1s;
    }
    .load1>.rect3{
      animation-delay: -1.0s;
    }
    .load1>.rect4{
      animation-delay: -0.9s;
    }
    .load1>.rect5{
      animation-delay: -0.8s;
    }
    @-webkit-keyframes stretchdelay {
      0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
      20% { -webkit-transform: scaleY(1.0) }
    }
    @keyframes stretchdelay {
      0%, 40%, 100% {
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
      }  20% {
        transform: scaleY(1.0);
        -webkit-transform: scaleY(1.0);
      }
    }
    

    遇到问题可以看我主页加我Q,很少看博客,对你有帮助别忘记点赞收藏。

    展开全文
  • 我们在开发微信小程序的时候,经常会使用到overflow:auto;来实现局部滚动效果,稍微注意的码有就会发现,ios真机设备上会有很明显的卡顿,但安卓设置就没这个问题。 解决方式 view{ overflow:auto; -webkit-...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 23,197
精华内容 9,278
关键字:

微信小程序动画

微信小程序 订阅