JavaScript-如何实现google logo 跑马动画的效果?

JavaScript-如何实现google logo 跑马动画的效果?

想挽留 发布于 2017-04-21 字数 602 浏览 1213 回复 2

前几日oogle的跑马图的logo是如何实现的呢?
可能有些人没有看到,没关系点击这里还能看
素材图片如下,有兴趣的可以自己实现下这个跑马的动画效果,并说说原理,方法越简洁越好。。

遮罩图片:
遮罩图片
跑马图:
跑马图
按钮图:
按钮图

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

灵芸 2017-05-28 2 楼

我先贴下我自己实现的(依赖jquery):

<div style='background: url("80047241/201204151338296800.jpg");height:162px;width:469px;position: relative;' id='box'>
        <img src='80047241/201204151338061808.png' id='mask' style='position:absolute;z-index:3;'/>
        <img src='80047241/201204151338447641.jpg' style="position:absolute;left:200px;top:55px;z-index:2;"/>
</div>

javascript:

$("#mask").click(function(e){
        if(e.pageX > 201 && e.pageX <= 268 && e.pageY > 54 && e.pageY <= 108){
            $(this).next().animate({'left':'188px','opacity':'0.3'},1000,function(){
                $(this).hide();
            });
            $(this).unbind('mousemove').css('cursor','default').unbind('click');
            if($.browser.msie && ($.browser.version == "6.0")){$(this).hide();}
            start(1,1);
        }
     }).mousemove(function(e){
        if(e.pageX > 201 && e.pageX <= 268 && e.pageY > 54 && e.pageY <= 108){
            $(this).css('cursor','pointer');
        }else {
            $(this).css('cursor','default');
        }
     })

     function start(i,s) {
            
            if(i >= 804) {
                run(1)
            }else {
                i+=s;
                $('#box').css('background-position',-i+'px 0');
                setTimeout(function(){start(i,++s);},70);
            }
     }
     
     function run(i) {
            i = i == 12 ? 0 : ++i;
            $('#box').css('background-position',-i*67+'px 0');
            setTimeout(function(){run(i)},30);
     }

针对上边的代码我简单的说下我的思路:
1)将跑马图片作为 背景图片,将那个带有颜色的背景图放在最上层,将开始按钮放在该层的下面,并将位置设置好。
2)我没有对最上层的图片做热点划分,而是通过鼠标在该元素上的位置来触发动画的开始,
图片为469 * 162,那么x轴于y轴的界限为:

y1 = 469/7 * 3 = 201
 y2 = 469/7 * 4 = 268
 x1 = 162/3 * 1 = 54
 x2 = 162/3 * 2 = 108

3) 函数start,利用setTimeout 来做动画的开始加速效果,实现方法就是通过设置跑马图的位置,-804时刚好是下一次的重复的长度,每次执行的时间固定,但是移动的位置越来越大从而实现加速的效果。
4)跑马图每个小图的长度是67,所以每次移动67像素每个小图就能实现动起来的效果,从左到右每个小格中的画面比上一格的慢30毫秒,但是用眼是看不出来的,所以感觉像是一起移动。

夜无邪 2017-05-12 1 楼

 var scrollBox = document.getElementById("classicScrollBox");
var num_record = 0;//起止位置计算
var num_motion = 1000;//动画执行间隔
var num_motionTime = 5;//动画缓动系数
window.onload = function(){
function scrolls(){
scrollBox.style.left = (parseInt(scrollBox.style.left)-67) +'px';
num_record += 67;
if(num_record == 804){
scrollBox.style.left = 0 + 'px';
num_record = 0;
}
num_motionTime = Math.ceil(num_motion/100);
if (num_motionTime == 0) {
num_motionTime = 1;
}
if (num_motion != 40) {
num_motion -= 10*num_motionTime;
}
setTimeout(scrolls,num_motion);
}
setTimeout(scrolls,num_motion);
}

来自:http://www.nowamgic.net/librarys/veda/detail/1734