动画自用

Posted 2022-09-30 beimingbingpo

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了动画自用相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
    .joinShopCarAnimation 
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        z-index: 999999;
        /*transition: all 2s;*/
    
    .t1
    	transition: transform 2s;
        transform: scale(2);
    
    .t2
    	transition:all 2s ;
    	width:1px;
    	height:1px;
    	transform: translate(300px,50px);
    
</style>
<body>
    <script>
    	var t0 = $(‘<div> <img src="http://baoyitech.oss-cn-hangzhou.aliyuncs.com/155610165000057acc0525856bc8888d9abb870d4b302" class="joinShopCarAnimation"></div>‘);
    	var t = $("body").append(t0)
    	setTimeout(function()
    		t0.find("img").addClass("t1");
    	,0)
    	var x = $(window).width()/2-10;
    	var me = 400;
    	var y = $(window).height()/2-10;
    	// var y = $(".t").height()+20
    	setTimeout(function()
    		t0.find("img").addClass("t2").css("transform","translate("+x+"px,"+(y-me)+"px)");
    	,2000)
    	setTimeout(function()
    		t0.remove();
    	,4000)
        </script>

</body>
</html>

以上是关于动画自用的主要内容，如果未能解决你的问题，请参考以下文章

Android动画之视图动画和属性动画

Android动画（帧动画补间动画属性动画）讲解

JQuery--基础动画滑动动画淡入淡出动画自定义动画

iOS中动画组、过渡动画

android动画笔记

Android 动画属性动画视图动画补间动画帧动画详解使用