当前位置： 移动技术网 > IT编程>网页制作>CSS > 前端动画解析

前端动画解析

2018年12月06日  | 移动技术网IT编程  | 我要评论

前端动画

 1>javascript直接实现

主要思想是通过setinterval或settimeout方法的回调函数来持续调用改变某个元素的css样式以达到元素样式变化的效果。



 

<script>
let elem = document.getelementbyid('rect');
let left = 0;
let timer = setinterval(function(){
if(left
缺点：javascript 实现动画通常会导致页面频繁性重排重绘，消耗性能，一般应该在桌面端。在移动端上使用会有明显的卡顿。


 


2>svg（可伸缩矢量图形）；


3>css3 transition；


4>css3 animation；


5>canvas动画；


6>requestanimationframe；


requestanimationframe是另一种web api，原理与settimeout和setinterval类似，都是通过javascript持续循环的方法调用来触发动画动作。但是requestanimationframe是浏览器针对动画专门优化形成的api，在性能上比另两者要好。




 

<script type="text/javascript">
window.requestanimationframe = window.requestanimationframe||window.mozrequestanimationframe||window.webkitrequestanimationframe||window.msrequestanimationframe;
let elem = document.getelementbyid("rect");
let left = 0;
//自动执行持续性回调
requestanimationframe(step);
//持续该改变元素位置
function step() {
if(left
7>jq动画


 


1)显示隐藏:


.show(ms) .hide(ms) .toggle(ms) 不带参数时默认瞬间显示隐藏，不带动画，原理: display属性实现的，带毫秒数参数: 会有动画效果。


toggle显示被隐藏的元素，并隐藏已显示的元素


2）上滑下滑: .slideup(ms) .slidedown(ms) .slidetoggle(ms)


3）淡入淡出:.fadein(ms) .fadeout(ms) .fadetoggle(ms)


2.万能动画:


$(…).animate(params,speed,callback)


params:一个包含样式属性及值的映射


speed:速度参数[可选]


callback：在动画完成时执行的函数[可选]，回调函数中的this，指正在播放动画的当前dom元素


8>总结


桌面端浏览器推荐使用javascript直接实现动画或svg方式；


移动端可以考虑使用css3transition、css3animation、canvas或requestanimationframe方式



                    

                        

                            
                        

                    

                    


                    
                    

                        
    
                            
  • 
                                
                            
    • 
                        

                    


                    
                    

                    

                        
您可能感兴趣的文章:

                        
                    

                    

                        如对本文有疑问，
                        点击进行留言回复！！
                    

                

                 
                

                    
相关文章:

                    
                

               
                 
                 

                

                    
                    

                        
                        
                        

                        

                            

                                
                                    
                                
                                 
                                    
                                
                            

                            

                                验证码：
                                
                                    
                                    
                                    
                                
                            

                        

                        
                    

                    
                    

                        
                        
                        
                    

                

            

        

        
        
 
            

                

                    
                    

                    
                


                

                    

                        

                            
最近更新的文章

                            

                                
                            

                        

                    

                


                

                    
                    

                        
                    

                


                

                

                    

                        

                            
大家感兴趣的文章

                            

                                
                            

                        

                    

                

                

                    
                    

                        
                    

                


            

        

    



 


 
 

     
    

        

移动技术网