概要

这次主要分享一下长图滚屏交互效果,之前谈这种小的交互页觉得实现思路多种多样，别人给了个样例问能不能搞，分析了一下资源，觉得复杂的交互资源几十张，做出来要疯，后面发现其实没有想象中的那么困难，仅以次做分享。

内容

主体内容如下,因为是个小东西，懒得用工程化去搞，短平快速度搞，主要用到的是pixijs实现长图的拼接、AlloyTouch实现了滚动与长图pixjs的滚动交互 其中音乐播放单纯的音乐其实可以不使用DPlayer，因为之前处理有视频的兼容问题，所以沿用了一下，大概的内容构成如下图：

内容大略如下：原谅我不能截动态图，领会精神即可

关键环节

1. pixijs相对会有背景、精灵、动画这些，再结合TimelineMax处理一些时间轴序列，其中需注意循环动画与触发动画用不同实例去处理。
2. 有关于viever.js图加载的问题，本来pixijs的资源加载项其实就可以一并处理了,用viever.js因为本身处理了懒加载的问题，预加载反倒是不能结合了，有些小弊病，但问题不大 3.关于pixijs长图分段的问题，有最大长度限制,应该是要小于6000px,后来实践中发现这种背景区分多场景的模式好处多，特定是针对每个场景定义复杂的交互动画时,相对的位置x，y的定义很好控制。
3. 这里面再pixjs中对图形的90°转置挺简单,但css中的转置居中等问题，需要适当的了解研究 图的转置全屏问题

.viewer-canvas >img{
   height: 90vw!important;
   width: 90vh!important;
 position: absolute!important;;
 top: 50%!important;;
 left: 50%!important;;
 transform: translate(-50%, -50%) rotate(90deg)!important;;
 transform-origin: center!important;;
 box-sizing: border-box!important;;
 margin: 0!important;
}

主运行机制

 let timeline = new TimelineMax({
  paused: true
});
let alloyTouch;
let max = (w > h) ? w : h;


function initTouch(vertical, val) {
  let scrollDis = app.stage.width - max
  alloyTouch = new AlloyTouch({
    touch: "#app", // 反馈触摸的dom
    vertical: vertical, // 不必需，默认是true代表监听竖直方向touch
    min: -scrollDis, // 不必需,运动属性的最小值
    maxSpeed: 1,
    max: 0, // 不必需,滚动属性的最大值
    bindSelf: false,
    initialValue: 0,
    target: document.getElementById('app'),
    sensitivity: 1,
    factor: 0.5,
    value: 0,
    maxSpeed: 1,
 
    change: function (value) {
      app.stage.position[val] = value;
      let progress = -value / scrollDis;
      progress = progress < 0 ? 0 : progress;
      progress = progress > 1 ? 1 : progress;
      timeline.seek(progress);
    }
  })
}

结束

总的来说，摸清一些交互思路还是比较容易的,这其中程序反倒是比较简单，美术图及交互动画的设计会比较重要,总之是同样的一套背景，做出来的观感差异还是比较多的，以上就是本次实践分享。