手机css3动画与animate动画流畅度比较

最新推荐文章于 2023-02-15 17:05:21 发布

财富实验室

最新推荐文章于 2023-02-15 17:05:21 发布

阅读量7.6k

点赞数 3

分类专栏：工作感悟文章标签：手机 css3

本文链接：https://blog.csdn.net/buaabyy/article/details/49706025

版权

工作感悟专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在手机端制作滚屏效果的js插件时，为了实现屏幕滚动效果，使用了jQuery的animate函数，如下：

this.$main.stop(true,true).animate({
                        top:'-='+(this.options.wh),
                    },(this.options.speed));

wh是屏幕高度，speed是动画速度，这些是可以配置的。这样基本可以实现滚屏的效果了，但是实际测试的时候回发现，在手机上运行的效果并不理想，普通一点的手机运行起来就会很卡了，后来查了一下animate函数对于手机来说，运行起来是比较困难的。只有高配的手机可以完美运行。为了解决这个问题，我们可以将动画改为css3动画。

this.$main.css({
                'transform':'translate3d(0,'+y+'px,0)',
                'transition':'all '+time+'ms',

                '-webkit-transform':'translate3d(0,'+y+'px,0)',
                '-webkit-transition':'all '+time+'ms',

                '-moz-transform':'translate3d(0,'+y+'px,0)',
                '-moz-transition':'all '+time+'ms',

                '-ms-transform':'translate3d(0,'+y+'px,0)',
                '-ms-transition':'all '+time+'ms',
            });

y为距离顶部的高度，time为动画时间。经过测试，css3在手机上是可以流畅的实现动画效果的。有一部分原因是css3在渲染动画效果时候，并没有真正的使div发生了位移，只是“看起来移动了”，所以div的top值并不会变。而animate函数是真的移动了div，top值会变。具体原因尚不清楚。这里记录一下，有时间再深入研究。