JavaScript: GIFless animation. JavaScript: GIFless hoạt hình. Animate images,logos with jQuery Animate hình ảnh, logo với jQuery

Posted on 23. Được đăng trên 23. Jul, 2009 by Dragos in Coding , Design , JavaScript & Ajax Tháng Bảy, 2009 bởi Dragos tại Coding, thiết kế, JavaScript & Ajax

After playing some time with position relative and absolute, I've noticed one a great aspect of the png image format (probably gif images are also good, but since we are trying to create a GIFless animation, I won't use any gif images in this tutorial). Sau khi chơi một thời gian với vị trí tương đối và tuyệt đối, tôi đã nhận thấy một trong một khía cạnh lớn của các định dạng hình ảnh png (ảnh gif có lẽ cũng tốt, nhưng kể từ khi chúng tôi đang cố gắng tạo ra một hình ảnh động GIFless, tôi sẽ không sử dụng bất kỳ hình ảnh gif trong hướng dẫn này).

So here's aa PNG (transparent text), with the name of this website: Vì vậy, đây là PNG aa (trong suốt văn bản), với tên của trang web này:

Transparent Logo Transparent Logo

The trick of animating images, without the need of using the GIF image format features, are as follow: Các trick của Animating hình ảnh, mà không cần sử dụng tính năng định dạng hình ảnh GIF, là như sau:

We have an image with transparent text written on it. Chúng ta có một hình ảnh rõ ràng bằng văn bản với nội dung trên đó. To animate the transparent text, we need to place a background image below the actual image and move this background image, in order to create a so called “animation”. Để animate văn bản minh bạch, chúng ta cần phải đặt một hình nền dưới hình thực tế và di chuyển hình ảnh nền, nhằm tạo ra một hình ảnh động "để gọi là". To be more precise, the image we want to be animated should have a higher z-index than the background image below it (it's like working with layers in Photoshop). Để được chính xác hơn, hình ảnh của chúng tôi muốn được động cần phải có một cao hơn z-index hơn hình ảnh nền bên dưới nó (nó giống như làm việc với các lớp trong Photoshop). In order to animate the background image we need some javascript work to be done. Để animate hình nền, chúng tôi cần một số công việc javascript cần phải làm. Of course, as a big fan of jQuery, I've used jQuery to do all the animation stuff. Tất nhiên, như là một fan hâm mộ lớn của jQuery, tôi đã sử dụng jQuery để làm tất cả những thứ hoạt hình.

Here's the script I've come up with: Đây là kịch bản tôi đã đến với:

 (function($){ (chức năng ($) (
            $.fn.enliven = function(options) { $ fn.enliven = chức năng (tùy chọn). (
                var defaults = { var mặc định = (
                    bgImage: '', bgImage:'',
                    duration:3000 thời gian: 3000
                }; );
                var options = $.extend(defaults, options); tùy chọn var = $. mở rộng (mặc định, tuỳ chọn);
                var imH=this.attr("height"), var IMH = this.attr ( "cao"),
                imW=this.attr("width"); imW = this.attr ( "width");
                this.wrap(' this.wrap ( '

'); ');
                this.css("position","absolute"); this.css ( "vị trí", "tuyệt đối");
                $('#'+this.attr("className")+'Cont').append(' $('#'+ this.attr ( "className") + 'Cont'). append ( '

'); ');
                var var
                maxLeft=($('.lbg'+this.attr("className")).attr('clientWidth')-this.attr('width'))/2, maxLeft =($('. LBG '+ this.attr ( "className")) attr (' clientWidth '.)-this.attr (' width ')) / 2,
                maxTop=($('.lbg'+this.attr("className")).attr('clientHeight')-this.attr('height'))/2; maxTop =($('. LBG '+ this.attr ( "className")) attr (' clientHeight '.)-this.attr (' height ')) / 2;
                function getrand() { chức năng getrand () (
                    var nr=Math.floor(Math.random()*2); var nr = Math.floor (Math.random () * 2);
                    return nr==0?-1:1; trở lại nr == 0? -1:1;
                } )
                function randimate(obj) { chức năng randimate (obj) (
                    var ph=Math.floor(imH*20/100),pw=Math.floor(imW*20/100); var vn = Math.floor (IMH * 20/100), pw = Math.floor (imW * 20/100);
                    newLeft=$(".lbg"+obj.attr("className")).attr("offsetLeft")+Math.floor(Math.random()*pw)*getrand(); newLeft =$(". LBG "+ obj.attr (" className ")) attr (" offsetLeft ") + Math.floor (Math.random () * pw) * getrand. ();
                    newTop=$(".lbg"+obj.attr("className")).attr("offsetTop")+Math.floor(Math.random()*ph)*getrand(); newTop =$(". LBG "+ obj.attr (" className ")) attr (" offsetTop ") + Math.floor (Math.random. () * vn) * getrand ();
                    if(newLeft>0) newLeft=0; nếu (newLeft> 0) newLeft = 0;
                    else if(newLeft<-maxLeft)                         newLeft=-maxLeft+1;                     if(newTop>0) newTop=0; if (newLeft <-maxLeft) newLeft =- maxLeft 1; nếu (newTop> 0) newTop = 0;
                    else if(newTop<-maxTop) if (newTop <-maxTop)
                        newTop=-maxTop+1; newTop =- maxTop 1;
                    $('.lbg'+obj.attr("className")).animate({left:newLeft+"px",top:newTop+"px"},defaults.duration,"linear",function(){ randimate(obj); }); $ LBG ( ''. + obj.attr ( "className")) animate ((left: newLeft + "px", top: newTop + "px"), defaults.duration, "tuyến tính", chức năng. () (randimate (obj );));
                } )
                return this.each(function(){ trở lại this.each (function () (
                    randimate($(this)); randimate ($ (này));
                }); ));
            }; );
        })(jQuery); )) (jQuery); 

The code above works as a plugin of jQuery, so it should be included in the page, after the inclusion of jQuery. Các mã trên hoạt động như một plugin của jQuery, vì vậy nó cần được bao gồm trong trang, sau khi sự bao gồm của jQuery. In order to animate an image, you should use this code: Để animate một hình ảnh, bạn nên sử dụng mã này:

 $('image_selector').enliven({bgImage:"./path_to_background_image.png",duration:1000}); //duration is the time of one time background animation $ ( 'image_selector'). linh hoạt ((bgImage: "/ path_to_background_image.png.", thời gian: 1000)); / / thời hạn là thời gian của một trong những hoạt hình nền thời gian 

Here's a crazy example 1: http://iwebdevel.com/wp-content/uploads/2009/07/logo.php Dưới đây là một ví dụ điên 1: http://iwebdevel.com/wp-content/uploads/2009/07/logo.php
Here's another non-crazy example 2: http://iwebdevel.com/wp-content/uploads/2009/07/logo2.php Đây là một không điên dụ 2: http://iwebdevel.com/wp-content/uploads/2009/07/logo2.php

If you like the idea and want more features, drop me a line in a comment and I'll try to improve the code and add more features Nếu bạn thích ý tưởng và muốn có thêm nhiều tính năng, thả tôi một dòng trong một chú thích và tôi sẽ cố gắng cải thiện mã và thêm nhiều tính năng hơn

Related posts: Liên quan đến bài viết:

1. JavaScript: What if jQuery animation doesn't fire/start? JavaScript: jQuery hoạt hình gì nếu không cháy / bắt đầu?
2. JavaScript: Get anchor from URL JavaScript: Nhận neo từ URL
3. JavaScript: How to get the index (position within a group) of an object with jQuery? JavaScript: Làm thế nào để có được chỉ số (vị trí trong một nhóm) của một đối tượng với jQuery?
4. Javascript: How to validate email address with JavaScript? Javascript: Làm thế nào để xác nhận địa chỉ email bằng Javascript?
5. JavaScript: Send function as a parameter to another function (callbacks) JavaScript: Gửi chức năng như một tham số đến một chức năng (callbacks)