AlloyTouch实战--60行代码消除QQ看点资料卡【分分快

作者:分分快三计划

加载更多

分分快三计划 1

API

Transform(domElement, [notPerspective]);

通过上面一行代码的调用,就可以设置或者读取 domElement的"translateX", "translateY", "translateZ", "scaleX", "scaleY", "scaleZ", "rotateX", "rotateY", "rotateZ", "skewX", "skewY", "originX", "originY", "originZ"!

方便吧!

原文链接:

传送门

官方网站:
Github地址:

头部动画

分分快三计划 2

传统的CSS3编程的问题

以前,我们一般使用animate.css、zepto/jQuery的animate方法或者tween.js css3进行交互特效编程。总结下来有三个缺点:

  • 不直观
  • 不直接
  • 不方便

开始AlloyTouch

Github:

任何意见和建议欢迎new issue,AlloyTouch团队会第一时间反馈。

简介

在过去的两年,越来越多的同事、朋友和其他不认识的童鞋进行移动web开发的时候,都使用了transformjs,所有必要介绍一下,让更多的人受益,提高编程效率,并享受编程乐趣。(当然transformjs不仅仅支持移动设备,支持CSS3 3D Transforms的浏览器都能正常使用transformjs)

实现代码

var infoList = document.getElementById("infoList"),
    mockHTML = infoList.innerHTML,
    scroller = document.getElementById("scroller"),
    header = document.getElementById("header"),
    userLogo = document.getElementById("user-logo-wrapper"),
    loading = false,
    alloyTouch = null;

Transform(scroller, true);
Transform(header);
header.originY = -70;
header.translateY = -70;
Transform(userLogo);

alloyTouch = new AlloyTouch({
    touch: "#wrapper",
    vertical: true,
    target: scroller,
    property: "translateY",
    maxSpeed: 2,
    outFactor: 0.1,
    min: 160 * -20   window.innerHeight - 202 - 50,
    max: 0,
    lockDirection: false,
    touchStart: function () {
        reastMin();
    },
    lockDirection: false,
    change: function (v) {
        if (v <= this.min   5 && !loading) {
            loading = true;
            loadMore();
        }
        if (v < 0) {
            if (v < -140) v = -140;
            var scaleY = (240   v) / 240;
            header.scaleY = scaleY;
            userLogo.scaleX = userLogo.scaleY = scaleY;
            userLogo.translateY = v / 1.7;
        } else {
            var scaleY = 1   v / 240;
            header.scaleY = scaleY;
            userLogo.scaleX = userLogo.scaleY = scaleY;
            userLogo.translateY = v / 1.7;
        }
    }
})

function loadMore() {
    setTimeout(function () {
        infoList.innerHTML  = mockHTML;
        loading = false;
        reastMin();
    }, 500)
}

function reastMin() {
    alloyTouch.min = -1 * parseInt(getComputedStyle(scroller).height)   window.innerHeight - 202;
}

document.addEventListener("touchmove", function (evt) {
    evt.preventDefault();
}, false);

就这么多代码。当然你要引用一个transformjs和alloy_touch.css.js。先看这一堆:

Transform(scroller, true);
Transform(header);
header.originY = -70;
header.translateY = -70;
Transform(userLogo);
  • Transform(xxx)是什么意思?

    赋予xxx transformation能力

  • 第一个scroller加上true代表关闭透视投影,为什么要关闭透视投影?

    因为scroller里面是有文本,防止文本在IOS中模糊的情况。

  • header是顶部的那个蓝色的区域。为什么要设置originY和translateY?为什么要设置为-70?

    因为header的高度为140px,用户向上滚动的过程中,需要对其进行scaleY变换。通常我们的做法是设置CSS3 transform-origin为 center top。而使用transformjs之后,可以抛弃transform-origin,使用originY或者originX属性便可。originY 设置为 -70,相对于高度为140的header来说就是center top。

再看这一堆:

alloyTouch = new AlloyTouch({
    touch: "#wrapper",
    vertical: true,
    target: scroller,
    property: "translateY",
    maxSpeed: 2,
    outFactor: 0.1,
    lockDirection: false,
    min: 160 * -20   window.innerHeight - 202 - 50,
    max: 0,
    touchStart: function () {
        resetMin();
    },
    lockDirection: false,
    ...
    ...
    ...
})
...
...
function resetMin() {
    alloyTouch.min = -1 * parseInt(getComputedStyle(scroller).height)   window.innerHeight - 202;
}

使用AlloyTouch最关键的一点就是计算min和max的值。min和max决定了可以滚到哪里,到了哪里会进行回弹等等。这里max是0毫无疑问。

  • 但是min那一堆加减乘除是什么东西?

    这里首次加载是20行数据,每一行高度大概160,主意是大概, window.innerHeight是视窗的高度,202px是滚动的容器的padding top的值,50px是用来留给显示加载更多的...
    分分快三计划 3

如上图所示,主要是需要求???的高度。

  • 那么怎么解决大概160*20的问题?

    touchStart的时候reastMin。resetMin会去通过getComputedStyle计算整个scroller的高度。

  • maxSpeed是干什么用的?

    用来限制滚动的最大速度,个人感觉调整到2挺舒适,这个可以根据场景和被运动的属性灵活配置。

  • outFactor是干什么用的?

    用来设置超出min或者max进行拖拽的运动比例系数,系数越小,超出min和max越难拖动,也就是受到的阻力越大。

  • lockDirection是干什么用的?

    lockDirection默认值是true。代表用户起手时候是横向的,而你监听的是竖直方向的touch,这样的话是不会触发运动。只有起手和监听对应上才会有触摸运动。这里把lockDirection设置成false就没有这个限制,不管用户起手的direction,都会有触摸运动。

再看AlloyTouch注入的change事件!头部动效核心的一个配置函数:

change: function (v) {
    if (v <= this.min   5 && !loading) {
        loading = true;
        loadMore();
    }
    if (v < 0) {
        if (v < -140) v = -140;
        var scaleY = (240   v) / 240;
        header.scaleY = scaleY;
        userLogo.scaleX = userLogo.scaleY = scaleY;
        userLogo.translateY = v / 1.7;
    } else {
        var scaleY = 1   v / 240;
        header.scaleY = scaleY;
        userLogo.scaleX = userLogo.scaleY = scaleY;
        userLogo.translateY = v / 1.7;
    }
}

v代表当前被运动对象的被运动属性的当前的值,根据这个v去做一些效果和加载更多。

  • 什么时候加载更多?

    当滚动你能看到加载更多的时候去加载更多

  • 什么时候能看到加载更多?

    v <= this.min 5。 可以看到change回调里可以拿到this,也就是AlloyTouch对象的实例,当v等于this.min代表滚到了底部,所以这里加上5代表快要滚动底部已经看到了加载更多。就去执行loadMore函数。

  • loading是干什么用的?

    防止重复loadMore用得,因为change执行得很频繁,所以这里会通过loading的状态去锁上。

  • 下面一堆设置scaleX、scaleY、translateY以及一堆数字是怎么来的?

    慢慢调试得出的最佳效果~~反正就是根据v的数值映射到 header和用户头像的transform属性上,这里就不一一讲了。

再看loadMore:

function loadMore() {
    setTimeout(function () {
        infoList.innerHTML  = mockHTML;
        loading = false;
        reastMin();
    }, 500)
}

这里使用了一段假的HTML去模拟AJAX异步请求以及数据转HTML的过程,整个耗时500ms,500ms后会去:

  • 插入HTML
  • 重置loading状态
  • 重置AlloyTouch的min

最后:

document.addEventListener("touchmove", function (evt) {
    evt.preventDefault();
}, false);

阻止掉整个document的默认事件,不会把整个页面拖下来,在手Q里的话,你就看不到网址和X5内核提供技术支持了。

不方便

transform的旋转点基准点默认是在中心,但是有些是时候,不系统在中心,我们传统的做法是使用transform-origin来设置基准点。
分分快三计划 4

注意,是另一个属性transform-origin,而不是transform。但是如果需要运动transform-origin呢?这种设计是不是就废了?有没有需要运动origin的场景?这个在游戏设计中是经常会使用的到,这个以后另外单独开篇再说,事实就是,有场景是需要运动origin来达到某种效果。

先验货

分分快三计划 5

  • 访问DEMO你也可以点击这里
  • 源代码可以点击这里

如你体验所见,流程的滚动的同时还能支持头部的动画?不断地加载新数据还能做到流畅的滑动!怎么做得的?使用AlloyTouch CSS 0.2.0及以上版本便可!

不直观

看下面这张图:
分分快三计划 6

顺序影响结果,不直观。那么为什么会是这个结果?可以通过new WebKitCSSMatrix(transform_str)对比最终的matrix。
分分快三计划 7

这也直接说明了矩阵不符合交换律。AB!=BA

不直接

zepto姿势:

$("#some_element").animate({
  opacity: 0.25, left: '50px',
  color: '#abcdef',
  rotateZ: '45deg', translate3d: '0,10px,0'
}, 500, 'ease-out')

translate3d: '0,10px,0'非常不方便,无法step递进递减控制。更别提配合一些运动或者时间的库来编程了。可能你会反驳'ease-out'不就可以实现缓动吗?但是如果我需要让x和y以及z分别对应不同的缓动函数,这种基于字符串编程的形式就费劲了~~
这里还需要注意的是,zepto里的顺序也会影响结果。因为其最后也是拼成string赋给dom元素。

tween.js姿势

var position = { x: 100, y: 100, rotation: 0 },
    target = document.getElementById('target');

    new TWEEN.Tween(position)
    .to({ x: 700, y: 200, rotation: 359 }, 2000)
    .delay(1000)
    .easing(TWEEN.Easing.Elastic.InOut)
    .onUpdate(function update() {
        var t_str= 'translateX('   position.x   'px) translateY('   position.y   'px) rotate('   Math.floor(position.rotation)   'deg)';
        element.style.transform = element.style.msTransform = element.style.OTransform = element.style.MozTransform = element.style.webkitTransform = t_str;
    });

使用字符串的方式,看着就心累。更别提写的过程要遭受多少折磨。

animate.css姿势:

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

animate.css封装了一大堆关键帧动画,开发者只需要关心添加或者移除相关的动画的class便可以。这一定程度上给交互特效带来了极大的遍历,但是要有硬伤:

  • 可编程性不够高
  • 适用于简单场景
  • 没有change回调,只有end回调

安装

npm install css3transform

transformjs

基于上面种种不便,所以有了transformjs!

  • transformjs作为腾讯AlloyTeam移动开发利器之一,广泛应用于手Q Web、微信Web相关业务开发
  • transformjs专注于CSS3 transform读取和设置的一个超轻量级js库,大大提高了CSS3 transform的可编程性
  • transformjs高度抽象,不与任何时间、运动框架捆绑,所以可以和任意时间、和运动框架轻松搭配使用
  • transformjs使用matrix3d为最终输出给dom对象,硬件加速的同时,不失去可编程性
  • transformjs拥有超级易用的API,一分钟轻松上手,二分钟嵌入真实项目实战
  • transformjs扩展了transform本身的能力,让transform origin更加方便

开始使用吧:
官方网站:
Github地址:

使用姿势

Transform(domElement);//or Transform(domElement, true);

//set "translateX", "translateY", "translateZ", "scaleX", "scaleY", "scaleZ", "rotateX", "rotateY", "rotateZ", "skewX", "skewY", "originX", "originY", "originZ"
domElement.translateX = 100;
domElement.scaleX = 0.5;
domElement.originX = 50;

//get "translateX", "translateY", "translateZ", "scaleX", "scaleY", "scaleZ", "rotateX", "rotateY", "rotateZ", "skewX", "skewY", "originX", "originY", "originZ"
console.log(domElement.translateX )

本文由分分快三计划发布,转载请注明来源

关键词: 分分快三计划 HTML5