原文链接:https://github.com/AlloyTeam/AlloyTouch/wiki/AlloyTouch-0.2.0
公司师姐昨日在 KM 发了篇长文,主要结论 RAF+transform3d 就是不如 transition+transform3d 平滑流畅,但是 transition+transform3d 没有 translate 属性变更 change 回调,只有 transitionend 的事件回调。最后得出的解决方案:
transformjs 在非 react 领域用得风生水起,那么 react 技术栈的同学能用上吗?答案是可以的。junexie 童鞋已经造了个 react 版本。
GitHub Pages 大家可能都知道,常用的做法,是建立一个 gh-pages 的分支,通过 setting 里的设置的 GitHub Pages 模块可以自动创建该项目的网站。
这里经常遇到的痛点是,master 遇到变更,经常需要去 sync 到 gh-pages,特别是纯 web 前端项目,这样的痛点是非常地痛。
Github 官方可能嗅觉到了该痛点,出了个 master 当作网站是选项,太有用了。
如上图所见,本文就是要实现上面那种效果。
由于最近 AlloyTouch 要写一个下拉刷新的酷炫 loading 效果。所以首选大波浪进度图。
首先要封装一下大波浪图片进度组件。基本的原理是利用 Canvas 绘制矢量图和图片素材合成出波浪特效。
轮播图也涉及到触摸和触摸反馈,同时,AlloyTouch 可以把惯性运动打开或者关闭,并且设置 min 和 max 为运动区域,超出会自动回弹。
除了一般的竖向滚动,AlloyTouch 也可以支持横向滚动,甚至任何属性的运动,因为它的设计的本质就是属性无关,触摸可以反馈到任何属性的运动。所以 AlloyTouch 制作各种各样的轮播组件还是得心应手。
Github 地址:https://github.com/AlloyTeam/AlloyTouch
AlloyTouch 的本质是运动一个数字,把数字的物理变化映射到你想映射的任何属性上。所以带来了广泛的应用场景。不论实在应用、游戏、操作系统等许多层面,监听用户触摸,给用户真实的运动反馈是很常见的应用场景。如王者荣耀里,旋转用户角色,抽奖程序滚动转盘、页面滚动、局部滚动等。
Copyright © 2011-2021 AlloyTeam. All Rights Reserved. Powered By WordPress
粤ICP备15071938号-2