原文链接: https://github.com/AlloyTeam/AlloyTouch/wiki/Powerful-transformjs 写在前面 上星期在React微信群里,有小伙伴觉得transformjs直接给DOM添加属性太激进,不可取(由于不在那个微信群,不明白为什么React会谈到transformjs?!).关于这点,其实在一年半前腾讯内部就有相关声音,腾讯内部的小伙伴建议,不要污染那么多吧~~,给个总的namespace,如: var element = document.…

简介 transformjs在非react领域用得风生水起,那么react技术栈的同学能用上吗?答案是可以的.junexie童鞋已经造了个react版本. 动画实现方式 传统 web 动画的两种方式: 纯粹的CSS3 :如:transition/animation+transform(大名鼎鼎的animate.css) JS + CSS3 transition或者animation:这里第一种一样,只是通过js里add class和remove class去增加或者移除对应的动画 纯粹JS控制时…

如你所见.这篇就是要讲下使用transformjs制作星球的过程.你也可以无视文章,直接去看源码和在线演示: 源码 | 在线演示 代码100行多一点,直接看也没有什么压力.下面分几步讲解下. 生成球上点坐标 设球心为 (a,b,c),半径为r, 则球的标准方程为 (x-a)²+(y-b)²+(z-c)²=r² 这里假设球心的(0,0,0),则: 标准方程为 x²+y²+z²=r² 因为可以渲染的时候再把球的本地坐标转为世界坐标进行位移,所以球心(0,0,0)便可以. function rando…

Antecedent Facebook made a HTML5 game long time ago. The opening animation is a piece of software that is similar to tofu, the effect as shown below gif: Facebook was using easeljs and tweenjs of createjs to produce, based on the Canvas animation. Th…

写在前面 记得以前facebook做过一款HTML5游戏.开场动画是一块软体类似豆腐的东西一起摇摆.类似的效果如下面的gif所示: facebook当时使用的是createjs下的子项目easeljs和tweenjs去制作,基于Canvas的动画.基本的原理主要是:循环运动Canvas抽象的DisplayObject的skewX和scaleY来实现软体摇摆. 目前来看transformjs也能做到,因为transformjs也能运动skewX和scaleY.先来看看facebook的方式. tw…

Introduction In the past two years, more and more friends for mobile web development have used the transformjs. I will introduce it in order to allow more people to benefit, improve programming efficiency, and enjoy the programming fun. (of course, t…

简介 在过去的两年,越来越多的同事.朋友和其他不认识的童鞋进行移动web开发的时候,都使用了transformjs,所有必要介绍一下,让更多的人受益,提高编程效率,并享受编程乐趣.(当然transformjs不仅仅支持移动设备,支持CSS3 3D Transforms的浏览器都能正常使用transformjs) 传送门 官方网站:http://alloyteam.github.io/AlloyTouch/transformjs/ Github地址:https://github.com/Alloy…

写在前面 transform是css3新增的一个属性,可是令开发者费解的是,其内部又有大量的属性如旋转.缩放.扭曲.平移,这也就导致了获取或者是设置transform中一个或者多个属性变得异常麻烦. transform.js意义 让前端没有难做的特效 告别style.xxxTransform= "xxx(xxdeg) xxx(xxx) " 直接element.scaleX=0.5,element.ratation=30.....,更加pure和友好; 自动更新元素的显示状态 当然这里t…

原文链接:https://github.com/AlloyTeam/AlloyTouch/wiki/Powerful-transformjs 写在前面 上星期在React微信群里,有小伙伴觉得transformjs直接给DOM添加属性太激进,不可取(由于不在那个微信群,不明白为什么React会谈到transformjs?!).关于这点,其实在一年半前腾讯内部就有相关声音,腾讯内部的小伙伴建议,不要污染那么多吧~~,给个总的namespace,如: var element = document.q…

原文链接:https://github.com/AlloyTeam/AlloyTouch/wiki/kandian 先验货 访问DEMO你也可以点击这里 源代码可以点击这里 如你体验所见,流程的滚动的同时还能支持头部的动画?不断地加载新数据还能做到流畅的滑动!怎么做得的?使用AlloyTouch CSS 0.2.0及以上版本便可! 头部动画 加载更多 实现代码 var infoList = document.getElementById("infoList"), mockHTML =…

原文链接:https://github.com/AlloyTeam/AlloyTouch/wiki/kandian 先验货 访问DEMO你也可以点击这里 源代码可以点击这里 如你体验所见,流程的滚动的同时还能支持头部的动画?不断地加载新数据还能做到流畅的滑动!怎么做得的?使用AlloyTouch CSS 0.2.0及以上版本便可! 头部动画 加载更多 实现代码 var infoList = document.getElementById("infoList"), mockHTML =…

原文链接:https://github.com/AlloyTeam/AlloyTouch/wiki/AlloyTouch-0.2.0 背景 公司师姐昨日在KM发了篇长文,主要结论RAF+transform3d就是不如transition+transform3d平滑流畅,但是transition+transform3d没有translate属性变更change回调,只有transitionend的事件回调.最后得出的解决方案: 支持动态切换 raf 和 transition~~ AlloyTouc…

轮播图也涉及到触摸和触摸反馈,同时,AlloyTouch可以把惯性运动打开或者关闭,并且设置min和max为运动区域,超出会自动回弹. 除了一般的竖向滚动,AlloyTouch也可以支持横向滚动,甚至任何属性的运动,因为它的设计的本质就是属性无关,触摸可以反馈到任何属性的运动.所以AlloyTouch制作各种各样的轮播组件还是得心应手. 第一种轮播图如上图所示.下面开始实现的过程. 第0秒 <div id="carousel-container"> <div clas…

传送门 Github地址:https://github.com/AlloyTeam/AlloyTouch 简介 AlloyTouch的本质是运动一个数字,把数字的物理变化映射到你想映射的任何属性上.所以带来了广泛的应用场景.不论实在应用.游戏.操作系统等许多层面,监听用户触摸,给用户真实的运动反馈是很常见的应用场景.如王者荣耀里,旋转用户角色,抽奖程序滚动转盘.页面滚动.局部滚动等. 上面的那些场景,都会使用到下面三种过程之一: 触摸.运动.减速.停止 触摸.运动.减速.回弹.停止 触摸.回弹.…

传送门 Github地址:https://github.com/AlloyTeam/AlloyFinger/tree/master/alloy_crop 在线Demo演示: 简介 裁剪图片的应用场景有头像编辑.图像编辑,在移动端要配合手势以及进行触摸反馈来进行变形以确认用户的选区进行裁剪.AlloyCrop就是专注于裁剪图像的组件,目前服务于QQ相关的Web业务,今日正式对外开源. 项目截图 这里需要注意的是,圆形裁剪出的图片其实是正方形的,这里可以通过CSS3圆角边框自行设置为圆形的图片. 使…

AlloyFinger is the mobile web gesture solution at present inside my company, major projects are in use. You can browse the source on GitHub:https://github.com/AlloyTeam/AlloyFinger Relative projects using AlloyFinger as shown below: If you want to cr…

简介 针对多点触控设备编程的Web手势组件,快速帮助你的web程序增加手势支持,也不用再担心click 300ms的延迟了.拥有两个版本,无依赖的独立版和react版本.除了Dom对象,也可监听Canvas内元素的手势(需要Canvas引擎内置对象支持addEventListener绑定touch相关事件). 据不完全统计,目前AlloyFinger服务于:兴趣部落.QQ群.QQ动漫.腾讯学院.TEDxTencent. AlloyTeam.腾讯CDC等多个部门.团队和项目. 功能清单 极小的文件…

  一分钟搞定AlloyTouch图片轮播 轮播图也涉及到触摸和触摸反馈,同时,AlloyTouch可以把惯性运动打开或者关闭,并且设置min和max为运动区域,超出会自动回弹.除了一般的竖向滚动,AlloyTouch也可以支持横向滚动,甚至任何属性的运动,因为它的设计的本质就是属性无关,触摸可以反馈到任何属性的运动.所以AlloyTouch制作各种各样的轮播组件还是得心应手. 第一种轮播图如上图所示.下面开始实现的过程. 第0秒 <div id="carousel-container&q…

记得以前facebook做过一款HTML5游戏.开场动画是一块软体类似豆腐的东西一起摇摆.类似的效果如下面的gif所示: facebook当时使用的是createjs下的子项目easeljs和tweenjs去制作,基于Canvas的动画.基本的原理主要是:循环运动Canvas抽象的DisplayObject的skewX和scaleY来实现软体摇摆.目前来看transformjs也能做到,因为transformjs也能运动skewX和scaleY.先来看看facebook的方式. tweenjs…

传送门 Github地址:https://github.com/AlloyTeam/AlloyTouch 简介 AlloyTouch的本质是运动一个数字,把数字的物理变化映射到你想映射的任何属性上.所以带来了广泛的应用场景.不论实在应用.游戏.操作系统等许多层面,监听用户触摸,给用户真实的运动反馈是很常见的应用场景.如王者荣耀里,旋转用户角色,抽奖程序滚动转盘.页面滚动.局部滚动等. 上面的那些场景,都会使用到下面三种过程之一: 触摸.运动.减速.停止 触摸.运动.减速.回弹.停止 触摸.回弹.…

原文地址:https://github.com/AlloyTeam/AlloyTouch/wiki/Simple-Select 写在前面 很多情况下,产品希望统一安卓和IOS select交互和样式.但是众所周知,IOS和安卓的select唤起的选择界面并不是样的,甚至IOS不同系统版本以及安卓不同系统版本下的select唤起的界面也不是相同的.而且省市区多选的需求,不管是IOS和安卓都没有提供原生界面的支持.所以唯一的办法就是web去模拟select唤起界面. 如上图所以,中间的区域是支持触摸…

插件体系 Omi是Web组件化框架,怎么又来了个插件的概念? 可以这么理解: Omi插件体系可以赋予dom元素一些能力,并且可以和组件的实例产生关联. omi-drag 且看这个例子: 点击这里→在线试试 import OmiDrag from './omi-drag.js'; OmiDrag.init(); class App extends Omi.Component { constructor(data) { super(data); } render() { return ` <div>…

写在前面 当滚动的内容很多,比如闹钟里设置秒,一共有60项.让使用者从59ms滚回01ms是一件很痛苦的事情,所以: 在列表项太多的情况下,我们希望能够有个无限循环的滚动.00ms和01ms是无缝链接起来的.如下图所示: 在线演示 http://alloyteam.github.io/AlloyTouch/select/infinite/ 插件使用 先引用依赖的JS和CSS文件. <link rel="stylesheet" href="select.css"…

原文链接--https://github.com/AlloyTeam/omi 写在前面 Omi框架经过几十个版本的迭代,越来越简便易用和强大. 经过周末的连续通宵加班加点,Omi v1.0版本终于问世.虽然版本遵循小步快跑.频繁迭代,但是Omi团队成员都有着克制之心,处女座占了半壁江山,所以Omi的API除了增量的API,其他的历史API没有任何变化. Github:https://github.com/AlloyTeam/omi 废话不多说,这就为大家介绍到目前1.0版本为止,关于Omi,你必…

原文链接 - https://github.com/AlloyTeam/omi/tree/master/tutorial 写在前面 Omi框架正式发布了omi-transform作为Omi组件化开发特效运动解决方案,让你轻松在Omi项目里快速简便支持CSS3 Transform设置.先说说 transform.js (npm上的名字是 css3transform).transform.js作为移动Web特效解决方案,在手Q兴趣部落.日迹.QQ群.QQ附近等项目中广泛使用,以激进的修改DOM属性为…

腾讯发布 Omix 1.0 - 用 JSX 或 hyperscript 创建用户界面 今天,腾讯正式开源发布 Omix 1.0, 让开发者使用 JSX 或 hyperscript 创建用户界面. Github 功能特性 超级快的速度, 点击这里体验一下 超小的尺寸, 7 KB (gzip) 良好的兼容性 IE8 内置支持JSX 和 hyperscript 支持局部 CSS, 不用费尽心思去想选择器了,让CSS更加简单 更自由的更新,每个组件都有 update 方法,可以自由选择最佳更新的时机,也…

原文链接--https://github.com/AlloyTeam/omi 写在前面 Omi框架经过几十个版本的迭代,越来越简便易用和强大. 经过周末的连续通宵加班加点,Omi v1.0版本终于问世.虽然版本遵循小步快跑.频繁迭代,但是Omi团队成员都有着克制之心,处女座占了半壁江山,所以Omi的API除了增量的API,其他的历史API没有任何变化. Github:https://github.com/AlloyTeam/omi 废话不多说,这就为大家介绍到目前1.0版本为止,关于Omi,你必…

这个插件也能做好多好多的事,比如上拉下拉加载数据,轮播,等一切和运动有关的特效. 具体看我的allowTouch这篇博客,掌握了其用法,在来看它是怎么和omi结合的.就会很简单. 当然使用起来也比较方便. 老规矩,先看demo: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>omi-touch</title&…

wepy官方文档: https://tencent.github.io/wepy/document.html#/ ESLint:一般用来校验JavaScript代码是否符合规范,不符合预期就报错(程序无法运行,提示错误地方) 官方文档:https://cn.eslint.org/ 演示地址:https://cn.eslint.org/demo/ Redux:提供可预测化的状态管理,我们的gulp.vue.wepy热更新 官方文档:https://www.redux.org.cn/ web tra…

针对多点触控设备编程的Web手势组件,快速帮助你的web程序增加手势支持,也不用再担心click 300ms的延迟了.拥有两个版本,无依赖的独立版和react版本.除了Dom对象,也可监听Canvas内元素的手势(需要Canvas引擎内置对象支持addEventListener绑定touch相关事件). 据不完全统计,目前AlloyFinger服务于:兴趣部落.QQ群.QQ动漫.腾讯学院.TEDxTencent. AlloyTeam.腾讯CDC等多个部门.团队和项目. 功能清单 极小的文件大小…