精华内容
下载资源
问答
  • 帮好友uniapp写个扭蛋机动画原来构思的是用jQuery写好了h5编译没什么问题,源码如下//按钮旋转$(but[index]).css({"transition": "transform 1s","transform":"rotate(360deg)"});//下落动画setTimeout(function(){//...

    帮好友uniapp写个扭蛋机动画

    原来构思的是用jQuery写好了h5编译没什么问题,源码如下

    //按钮旋转

    $(but[index]).css({

    "transition": "transform 1s",

    "transform":"rotate(360deg)"

    });

    //下落动画

    setTimeout(function(){

    //jquery animate使用rpx单位会无效

    $(".ball").animate({

    top:"+=63vw"

    }, 1000);

    $(".shadow").animate({

    width: "4.2rem",

    height: "1.45rem"

    },800);

    }, 1000);

    setTimeout(function(){

    uni.showToast({

    title: '恭喜宁抽中个大嘴巴子!请联系赖亦安兑换',

    duration: 3000

    });

    }, 2000)

    this.firstPlayFlag=false;

    可是编译微信小程序 却出现较多问题

    1.报错:$ is not defined 原因:微信小程序端是使用jscore进行编译的不存在DOM结构,而jQuery就是依靠操作dom来完成的。不支持自然也就正常了

    2.报错:图片加载不出来 原因:微信的背景图片不能使用本地的,必须使用base64格式,或者使用在线图片,否则报错图片加载不出来

    由于当时理解有限,以为只是微信小程序不支持jquery 那我用原生js总可以了吧 结果又换了套原生的

    原生js废案 //点击的球id

    let index = e.currentTarget.dataset.id

    let but = document.getElementsByClassName("button")

    let ball = document.getElementsByClassName("ball")

    //but[index]

    but[index].classList.add("Spin");

    setTimeout(function(){

    //console.log(ball[0])

    ball[0].classList.add("Down")

    ball[0].classList.add("Down")

    },1000)

    这次的动画使用了添加类的方法 类样式放底部了

    报错了,还是那个原因微信小程序没有dom document识别不了

    无奈之下又改成了uniapp完美版,源码如下

    animate(e){

    if(this.firstPlayFlag){

    let index = e.currentTarget.dataset.id

    let that = this

    this.tis[index].isSpin = true

    setTimeout(function(){

    that.isDown = true

    that.isBig = true

    },1000)

    setTimeout(function(){

    uni.showToast({

    title: '恭喜宁抽中个sb',

    duration: 3000

    });

    },2000)

    }

    this.firstPlayFlag = false

    }

    类动画源码

    .Spin{

    -webkit-animation:mymove 1s 1;

    }

    @keyframes mymove

    {

    from {transform: rotateZ(0deg);}

    to {transform: rotateZ(360deg);}

    }

    @-webkit-keyframes mymove /*Safari and Chrome*/

    {

    from {transform: rotateZ(0deg);}

    to {transform: rotateZ(360deg);}

    }

    .Down{

    position: absolute;

    top:760rpx;

    -webkit-animation:down 1s 1;

    }

    @keyframes down

    {

    from {top: 18vh;}

    to {top:100vw;}

    }

    .Big{

    width:4.2rem;

    height:1.45rem;

    background-color: grey;

    border-radius: 50%;

    position: absolute;

    top: 847rpx;

    z-index: 2;

    -webkit-animation:shadow 1s 1;

    }

    @keyframes shadow

    {

    from{width: 0;height: 0;},

    to{width:4.2rem;height:1.45rem}

    }

    展开全文
  • 1、按钮控制view中的动画(向右隐藏向左显示) 效果图: wxml代码: <view class="container"> <view class="view-main" animation="{ {animationData}}"></view> <button style

    1、按钮控制view中的动画(向右隐藏向左显示)

    效果图:
    在这里插入图片描述
    wxml代码:

    <view class="container">
      <view class="view-main" animation="{
       {animationData}}"></view>
      <button style
    展开全文
  • jslet animationShowHeight = 300;Page({/*** 页面的初始数据*/data: {animation: ''},// 下来btnClick: function () {var animation = wx.createAnimation({transformOrigin: "50% 50%",duration: 1000,...

    62eff4036240d4e4fcfb1ca68ce3f686.png

    js

    let animationShowHeight = 300;

    Page({

    /**

    * 页面的初始数据

    */

    data: {

    animation: ''

    },

    // 下来

    btnClick: function () {

    var animation = wx.createAnimation({

    transformOrigin: "50% 50%",

    duration: 1000,

    timingFunction: "ease",

    delay: 0

    })

    this.animation = animation

    animation.translateY(animationShowHeight).step()

    this.setData({

    animation: animation.export(),

    })

    },

    // 上去

    btnClickTo: function () {

    var animation = wx.createAnimation({

    transformOrigin: "50% 50%",

    duration: 1000,

    timingFunction: "ease",

    delay: 0

    })

    this.animation = animation

    animation.translateY(0).step()

    this.setData({

    animation: animation.export(),

    })

    }

    })

    wxml

    点我下去

    点我回去

    我一会就出来吓死你

    我一会就出来吓死你

    我一会就出来吓死你

    展开全文
  • 点击不同的图片,进入swiper页面,显示到对应的item上 我使用了current属性 第一个页面向第二个页面传递,对应的id <image class="cxyr-icon {{big_icon == 1?'big':''}}" data-id="1" src="{{chen_icon}}" ...

    点击不同的图片,进入swiper页面,显示到对应的item上
    我使用了current属性
    第一个页面向第二个页面传递,对应的id

    <image class="cxyr-icon {{big_icon == 1?'big':''}}" data-id="1" src="{{chen_icon}}" bindtap="toDetail"></image>
    
    toDetail: function (e) {
        var id = e.currentTarget.dataset.id;
        wx.navigateTo({
          url: '../part_swiper/part_swiper?index='+id,
        })
      }
    

    第二个页面接收传递过来的id,并赋值给current,第一次跳转到对应的item时,滑动动画时长为0

    onLoad: function (options) {
        let index_current = options.index-1;
        console.log(index_current)
        this.setData({index_current: index_current,duration:0});
      },
    
    <swiper class="swiper-bottom" style="height: 100%;" current="{{index_current}} " duration="{{duration}}" indicator-dots="true" indicator-color="rgba(255,255,255,.3)" indicator-active-color="#FFF"> 
    <swiper>
    

    在swiper页面,正常滑动时,滑动动画设置为正常的默认500毫秒

    onReady: function () {
        this.setData({duration:500});
      },
    
    展开全文
  • 水波波动效果实现,复制查看效果 wxml <view class="circle"> <view class="positionNumber"> <view>60%</view> <view>匹配指数</view> <....positionN
  • 在编写微信小程序的代码时,我们会发现:原生加载动画样式不多,可供我们设置的参数也不多。         通过查询可以得知,若是需要自己定义加载动画,一般的做法就是:在...
  • 微信小程序加入购物车动画 本次微信小程序项目是用Taro框架开发 index.js文件 export default class StationInfo extends Component { constructor() { super(...arguments) this.state = { total: null, //...
  • 一次开发小程序的时候,使用了css的animation和transform-style: preserve-3d;但是发现页面会时而闪烁,因为我使用的动画是3d的无限转动,因此猜测是页面转动的时候超过了页面的宽度导致闪烁。 解决办法就是在动画...
  • 微信小程序列表加载动画微信小程序列表加载动画示例实现思路什么是动画?导航栏设置列表动画加载完整代码demo 微信小程序列表加载动画示例 初学微信小程序开发,记录一下。网上找了很久这种效果,帖子很少,都没看到...
  • 本文实例为大家分享了微信小程序动画之圆形进度条,供大家参考,具体内容如下上图:代码:js://获取应用实例var app = getApp()var interval;var varName;var ctx = wx.createCanvasContext('canvasArcCir');Page({...
  • 开发小程序,实现动画功能,有两种实现方式,下面来看看具体怎么做:JS动画利用小程序API提供的wx.createAnimation(OBJECT)实现,API中是这样说:创建一个动画实例animation。调用实例的方法来描述动画。最后通过...
  • { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ ...
  • 让更新资料旁边的图标在原地进行旋转 WXML文件 <view class="update" bindtap="upDate"> 更新资料 <image class=" " animation='{{animationData}}' style="width:23rpx;height:23rpx;...
  • 这是开发小程序经常会用到的小功能,所以就做一下总结。 以点击出现底部导航卡为例。 view代码如下 <view class="click" bindtap="blocknav"> <image src="../../images/click.png"></image> &...
  • 小程序播放器专辑界面旋转动画 二话不说看效果 首先是CSS样式 .music_on{ animation: audio-rotate 8s linear infinite; } .audio_control{ display: flex; flex-direction: row; justify-content:space-...
  • 微信小程序实现一个复杂的路径动画前言效果预览页面代码结论 前言 微信小程序不支持svg动画,如今css3发展的越来越快,虽然没有svg的接口那么丰富,但使用起来比较容易上手,下面借助两个工具实现一个复杂的路径动画,在...
  • 微信小程序 实现集卡 合成动画 效果图微信小程序动画搭建结构样式js 效果图 没找到合适的录gif的工具 找到在补 微信小程序动画 创建一个动画实例 animation 调用实例的方法来描述动画 最后通过动画实例的 ...
  • */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } }) index.wxss page { margin: 0; /* 外边距 */ padding: 0; /* 内边距 */ background-color: #262626; /* ...
  • 使用一个canvas绘制(带动画); 通过画弧线,设置线宽,来实现圆环效果; 计算每段圆弧的起始角度和终止角度,用递归做动画; 绘制完第一段圆弧块–>再绘制下一块,下一块的起始角度是上一块结束的角度+间隙...
  • 微信小程序加购动画

    2021-11-23 10:09:52
    电商版加购动画,从鼠标点击位置,跳转到指定位置,抛物线 wxml <view class="good-red-point" wx:if="{{busShow}}" style="--startX:{{bus.sx}}px;--startY:{{bus.sy}}px;--endX:{{bus.ex}}px;--endY:{{bus.ey}...
  • 最近鹏仔刚接触uniapp,项目使用uniapp开发微信小程序,需要实现一个长按时进行语音录制,限制录制时间最大为60秒,录制完成后,可点击播放,播放时再次点击停止播放,录制完成长按实现删除功能,删除后又可重新录制...
  • 本文主要介绍了如何实现小程序tab栏下划线动画效果,分享给大家,具体如下:最终效果实现wxml{{item}}wxss.abox{display: flex;flex-direction: row;width: 100%;justify-content: space-around;position: relative;...
  • 微信小程序之 toggle效果 点击隐藏再点击显示 实现场景:微信小程序 实现效果图: 一.单个下拉列表 二.多个下拉列表 由于微信小程序中不能操作dom元素、且不能使用jQuery,实现这样的toggle效果就比较麻烦,这里...
  • 微信小程序清除 button按钮 的默认点击效果 在 button 中进行插入 hover-class=“none” 即可 在微信官方文档中有对于此项属性的详细解释
  • { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } }) index.wxss .box{ margin: 0; /* 外边距 */ padding: 0; /* 内...
  • 'show-more-click' : '']"> 第1行文字</view> 第2行文字</view> 第3行文字</view> 第4行文字</view> 第5行文字</view> 第6行文字</view> </view> </view> css /* 点击更多的样式 */ .show-more{ ...
  • /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } }) 点是我们加样式,只加部分 这样的话,写代码就没 有多大问题,要全部...
  • 前言在小程序中,用户与界面进行交互时,有一些用户反馈提示,例如:触发某个按钮,从底部弹出框,从顶部弹出等如今,有一些现成的 UI 库,虽然已经实现了的,但若只是为了实现一个底部弹出框或者自定义提示框,不引用第三方 ...
  • 简单分享一下常用的底部弹窗层或下拉框弹出层(代码需要修改)的内容弹窗的动画效果,这里分享的是点击按钮后底部弹窗的动画效果。第一种方式是动态设置显示区域的高度,第二种方法是动态设置显示区域的移动的位置...
  • { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 69,023
精华内容 27,609
关键字:

小程序点击动画