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

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

滚动驱动动画示例

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

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

(2) #scroller：scroll-view，整个scroll-view

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

(3) .nav：view，导航栏区域；通过style行内样式设置padding-top，不推荐使用行内样式；

• wxcss文件中的.nav样式：

  .nav {
    position: fixed;/*fixed相对于浏览器窗口定位；absolute相对于有position属性的父元素定位；relative相对于自身的原始位置定位*/
    top: 0;
     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_bar的position属性值为absolute，相对于有position属性的父元素定位，即为相对于.nav进行定位，距离它的顶部20px。
• .search_input，输入框的样式：

  .search_input { 
    text-align: left;
    display: inline-block;/*行内块级元素*/
     10%;/*宽度为父元素宽度的10%*/
    background-color: #F3F3F3;
    color: #888;
    height: 25px;
    line-height: 25px;
    font-size: 12px;
    border-radius: 3px;/*圆角*/
    overflow: hidden;/*超过部分隐藏*/
  }
  

• .search_input text：text，输入框中的文本样式：

  .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;
     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内容

• scrollLeft和scrollTop属性，该元素显示内容与实际内容的距离，或者说向左或向上滚动的距离
• scrollWidth和scrollHeight属性，该元素内容的实际宽度和高度
• deltaX和deltaY属性，向右和向上滚动时返回正值，向左和向下滚动时返回负值
• 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,//结束滚动动画的位置
  })
  

这里只记录一部分比较重要的内容，学习小程序过程中的完整总结请查看github