用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

8

主题

31

帖子

539

积分

版主

Rank: 7Rank: 7Rank: 7

积分
539
2017-1-24 14:53:36 jeffer开发者认证 版主 楼主 34367
ripple: 水涟漪效果      
reveal: 揭露效果
ripple: 主要是两个view的叠加,设置最上层view的border-radius为100%,背景设置半透明。最下层view设置点击事件,并记录点击时的绝对坐标与相对坐标,坐标运算之后,同时动态改变最上层view的top与left,即可实现手指点击哪里,最上层view就会出现在那里。 最后实现涟漪,通过对上层view进行放大动画即可。
reveal:是ripple的变形,减慢动画执行时间,同时保持两层view的背景色动态保持一致即可。

JS:
[AppleScript] 纯文本查看 复制代码
Page({
  data:{
      ripple_style:'',
      ripple_style2:'',
      reveal:"Reveal",
      reveal_style:''
  },
  onLoad:function(options){
    // 生命周期函数--监听页面加载
    wx.setNavigationBarTitle({
      title: options.title,
      success: function(res) {
        // success
      }
    })
  },

  onClickPaper:function(e){
      var that = this
      var offLeft = e.currentTarget.offsetLeft
      var offTop = e.currentTarget.offsetTop
      var pageX = e.changedTouches[0].pageX
      var pageY = e.changedTouches[0].pageY
      console.log(pageX-offLeft-25)
      console.log(pageY-offTop-25)
      
      this.setData({
          ripple_style:'top:'+(pageY-offTop-25)+'px ; left:'+(pageX-offLeft-25)+'px ;-webkit-animation: ripple 0.4s linear; animation: ripple 0.4s linear;'
          
      })
      setTimeout(function(){
        that.setData({
          ripple_style:' -webkit-animation: ripple-reset 0s linear; animation: ripple-reset 0s linear;'
          
      })
      },300)

    //   do something

  },

  onClickPaper2: function(e){
    var that = this
      var offLeft = e.currentTarget.offsetLeft
      var offTop = e.currentTarget.offsetTop
      var pageX = e.changedTouches[0].pageX
      var pageY = e.changedTouches[0].pageY
      console.log(pageX-offLeft-50)
      console.log(pageY-offTop-50)
      if(this.data.reveal==='Reveal'){
          this.setData({
          ripple_style2:'background-color:red;top:'+(pageY-offTop-25)+'px ; left:'+(pageX-offLeft-25)+'px ;-webkit-animation: ripple 2s linear; animation: ripple 2s linear;'
          
          })
          setTimeout(function(){
            that.setData({
            reveal_style:'background-color:red;',
            reveal:'Switch',
            ripple_style2:' -webkit-animation: ripple-reset 0s linear; animation: ripple-reset 0s linear;'
          
           })
        },1000)
     }else{
         this.setData({
          ripple_style2:'background-color:deepskyblue;top:'+(pageY-offTop-25)+'px ; left:'+(pageX-offLeft-25)+'px ;-webkit-animation: ripple 2s linear; animation: ripple 2s linear;'
          
          })
          setTimeout(function(){
            that.setData({
            reveal_style:'background-color:deepskyblue;',
            reveal:'Reveal',
            ripple_style2:' -webkit-animation: ripple-reset 0s linear; animation: ripple-reset 0s linear;'
          
           })
        },1000)
     }
      
  }

})


CSS:
[AppleScript] 纯文本查看 复制代码
.ripple-main{
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}


    .v-content {
      background-color: deepskyblue;
      margin-top: 20rpx;
      width: 40%;
      height: 50px;
      overflow: hidden;
      box-shadow: 2px 2px 2px 1px lightgrey;
      border-radius: 2px;
      text-align: center;
      position: relative;
      margin-bottom: 80rpx;
    }

    .v-content2 {
      background-color: deepskyblue;
      margin-top: 20rpx;
      width: 40%;
      height: 50px;
      overflow: hidden;
      box-shadow: 2px 2px 2px 1px lightgrey;
      border-radius: 2px;
      text-align: center;
      position: relative;
    }

    
    .tx {
      font-size: 28px;
      color: white;
      line-height: 50px;
    }
    .ripple {
      background-color: rgba(0, 0, 0, 0.15);
      border-radius: 100%;
      height: 50px;
      width: 50px;
      position: absolute;
      
    }

    .ripple2 {
      border-radius: 100%;
      height: 50px;
      width: 50px;
      position: absolute;
     
      
    }



  
    @-webkit-keyframes ripple {
      100% {
        -webkit-transform: scale(15);
        transform: scale(15);
      }
    }
    @keyframes ripple {
      100% {
        -webkit-transform: scale(15);
        transform: scale(15);
      }
    }


    @-webkit-keyframes ripple-reset {
      100% {
        -webkit-transform: scale(0);
        transform: scale(0);
        background-color: transparent;
      }
    }
    @keyframes ripple-reset {
      100% {
        -webkit-transform: scale(0);
        transform: scale(0);
        background-color: transparent;
      }
    }


效果图:
1.gif


项目地址及下载:
源码:https://github.com/jeffer0323/We-MaterialDesign(欢迎点star)
源码下载: We-MaterialDesign-master (1).zip (38.84 KB, 下载次数: 1)

评分

参与人数 1原创 +1 浮云 +20 收起 理由
天下雪 + 1 + 20 赞一个!

查看全部评分

看来楼主志向远大,真的准备弄一个系列了,支持
因为这个版块,有很多回复可见,所以就帮楼主也设置一个,以免帖子沉的太快
有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。
1234
2017-1-24 19:29:06 skyvow原创达人 优秀会员纪念 来自手机 版主
地板
支持,学习下
发新帖
您需要登录后才可以回帖 登录 | 立即注册