小程序学习-滚动驱动动画示例

Posted yuyuyu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了小程序学习-滚动驱动动画示例相关的知识,希望对你有一定的参考价值。

小程序学习-滚动驱动动画示例

滚动驱动动画示例

(1) 设置控件居中,需要设置父控件的css样式

view {
  display: flex;/*flex弹性布局*/
  align-items: center;/*item在交叉轴上的对齐方式*/
  justify-content: center;/*item在主轴上的对齐方式*/
}

(2) #scrollerscroll-view,整个scroll-view

  • scroll-y:y方向滚动;
  • throttle:不清楚,查了文档scroll-view没有这个属性;
  • data-status-bar-height:将数据绑定到组件,事件触发时,在targetdataset对象中可以获取到转换后的属性statusBarHeight

(3) .navview,导航栏区域;通过style行内样式设置padding-top,不推荐使用行内样式;

  • wxcss文件中的.nav样式:
    .nav {
      position: fixed;/*fixed相对于浏览器窗口定位;absolute相对于有position属性的父元素定位;relative相对于自身的原始位置定位*/
      top: 0;
      width: 100%;
      background-color: #000;
      height: 44px;
      padding-top: env(safe-area-inset-top);/*获取上边框安全距离,适配iphoneX全面屏*/
      z-index: 1;/*设置元素的堆叠顺序,数字大的在上面,可以为负值,必须是设置了position属性的元素*/
    }
    
  • open-data 用于展示微信开放的数据。userNickName获取用户昵称;userAvatarUrl获取用户头像;userProvince获取用户省份;userCity获取用户城市;
  • .search_bar搜索框: style行内样式设置top属性;因为.search_barposition属性值为absolute,相对于有position属性的父元素定位,即为相对于.nav进行定位,距离它的顶部20px。
  • .search_input,输入框的样式:
    .search_input { 
      text-align: left;
      display: inline-block;/*行内块级元素*/
      width: 10%;/*宽度为父元素宽度的10%*/
      background-color: #F3F3F3;
      color: #888;
      height: 25px;
      line-height: 25px;
      font-size: 12px;
      border-radius: 3px;/*圆角*/
      overflow: hidden;/*超过部分隐藏*/
    }
    
  • .search_input texttext,输入框中的文本样式:
    .search_input text {
      padding-left: 20px;/*内左边距,预留icon位置*/
      line-height: 25px;
      display: inline-block;
      height: 25px;
    }
    
  • .search_bar icon: icon,微信提供的一些默认图标

(4) .info内容区域

  • .info的样式:
    .info {
      margin-top: env(safe-area-inset-top);/*外上边距,预留状态栏高度*/
      padding-top: 44px;/*内上边距,预留nav高度*/
      /* display: flex; */
      background-color: white;
    }
    
  • .avatar头像,行内样式top: {{((statusBarHeight + 44) - 80) - 5}}px,设置top为-21px和sticky一起使用当头像位置超过父元素(此处为scroll-view)21px之后固定;css文件中的样式为:
    .avatar {
      /* display: inline-block; */
      display: flex;
      border-radius: 100%;
      border: 2px solid #FAFAFA;
      height: 100px;
      width: 100px;
      overflow: hidden;
      /* position: absolute; */
      left: 20px;
      /* top: 10px; */
      will-change: transform;/*提前告知浏览器该元素要进行transform动画,避免开始动画时闪屏*/
      /* transition: transform .03s linear; */
      z-index: 2;/*在导航栏图层上面*/
      /* contain: strict; */
      position: sticky;/*粘性定位,主要用在scroll-view中,相对于最近的scroll-box类型(含有滚动条或者设置了overflow属性)的父元素进行定位,当超过了设置的top/right/bottom/left的值时会固定*/
      /* top: -20px; */
      transform: translateY(-20px);/*通过transform属性对元素进行旋转,缩放,倾斜,平移等操作,顺序为rotate, scale, skew, translate*/
      transform-origin: left 75%;/*元素transform动画的原点,相对于元素左上角的距离,默认为自身中心点*/
    }
    
  • .intro简介,bindtap绑定点击事件
  • .scroller2: scroll-view,页面中间的scroll-view;scroll-x设置滚动方向为横向滚动;bindscroll绑定滚动事件;bindtouchend绑定触摸结束事件;scroll-with-animation设置滚动条位置时是否使用动画;scroll-left设置横向滚动条的位置;
  • menu_wrap,scroll-view下的子控件,设置足够的宽度来显示内容;样式为:
    .menu_wrap {
      white-space: nowrap;/*所有内容显示在一行,不换行*/
      padding: 9px 0;
      position: relative;
    }
    
  • .menu_item_more查看更多按钮,通过滚动动画控制是否显示;

(5) js内容

  • scrollLeftscrollTop属性,该元素显示内容与实际内容的距离,或者说向左或向上滚动的距离
  • scrollWidthscrollHeight属性,该元素内容的实际宽度和高度
  • deltaXdeltaY属性,向右和向上滚动时返回正值,向左和向下滚动时返回负值
  • createSelectorQuery()创建选择器,用于选取指定元素
  • select()指定选择器,选取第一个匹配到的元素
  • fields(Object, Function)获取节点信息,Object中指定需要返回哪些节点信息,Function回调方法,里面有需要的节点信息
  • this.animate(selector, keyframes, duration, callback)关键帧动画
  • this.animate(selector, keyframes, duration, ScrollTimeline)滚动驱动的动画,示例:
    //this.animate(selector, keyframes, duration, ScrollTimeline)滚动驱动的动画
    this.animate(‘.avatar‘, [{
      borderRadius: ‘0‘,
      borderColor: ‘red‘,
      transform: ‘scale(1) translateY(-25px)‘,
      offset: 0,//offset关键帧的偏移,范围【0,1】标识开始和结束帧
    }, {
      borderRadius: ‘25%‘,
      borderColor: ‘green‘,
      transform: ‘scale(.65) translateY(-25px)‘,
      offset: .4,
    }, {
      borderRadius: ‘50%‘,
      borderColor: ‘blue‘,
      transform: `scale(.3) translateY(-20px)`,
      offset: 1
    }], 2000, {
      scrollSource: ‘#scroller‘,//滚动元素
      timeRange: 2000,//时间
      startScrollOffset: 0,//开始滚动动画的位置
      endScrollOffset: 85,//结束滚动动画的位置
    })
    

以上是关于小程序学习-滚动驱动动画示例的主要内容,如果未能解决你的问题,请参考以下文章

[前端小项目] 滚动动画 Scroll Animation (50projects50days)

膜拜!用最少的代码却实现了最牛逼的滚动动画!

小程序根据索引滚动指定的位置

Flutter ListView 滚动动画重叠兄弟小部件

微信小程序:波浪动画实现

模仿东京首页banner轮播,京东新闻上下滚动动画实现(动画实现)