动画平台

Posted 2022-09-27 liuhao-web

tags:

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

<!DOCTYPE html>

<html>

<head>

<style>

padding: 0;

margin: 0;

box-sizing: border-box;

body

padding: 30px;

.a img

width: 100%;

height: 100%;

position: absolute;

top: 50px;

left: 50px;

width: 100px;

height: 100px;

background: gray;

position: absolute;

top: 250px;

left: 250px;

width: 100px;

height: 100px;

background: gray;

position: absolute;

.vmobile

margin-left: 30px;

margin-top: 30px;

position: relative;

width: 375px;

height: 1667px;

border: 1px solid #e3e3e4;

box-shadow: -2px 0px 5px 1px #e3e3e4, 0px -2px 5px 1px #e3e3e4, 2px 0px 5px 1px #e3e3e4, 0px 2px 5px 1px #e3e3e4;

.con

display: flex;

.handlerCon

flex: 1;

padding-left: 30px;

.mobileItem

animation-duration: 3s;

animation-delay: .2s;

animation-iteration-count: infinite;

table td

text-align: center

.layui-col-xs6

padding-left:20px;

.animal

margin-bottom: 10px;

</style>

</head>

<body>

</div>

</fieldset>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

</fieldset>

<br>

<button class="layui-btn" id="insertButton">确定插入图片</button>

<br>

<legend>给元素添加动画</legend>

</fieldset>

<br>

<br>

</fieldset>

<br>

</div>

</body>

var animal =‘bounce,flash,pulse,rubberBand,shake,headShake,swing,tada,wobble,jello,bounceIn,bounceInDown,bounceInLeft,bounceInRight,bounceInUp,bounceOut,bounceOutDown,bounceOutLeft,bounceOutRight,bounceOutUp,fadeIn,fadeInDown,fadeInDownBig,fadeInLeft,fadeInLeftBig,fadeInRight,fadeInRightBig,fadeInUp,fadeInUpBig,fadeOut,fadeOutDown,fadeOutDownBig,fadeOutLeft,fadeOutLeftBig,fadeOutRight,fadeOutRightBig,fadeOutUp,fadeOutUpBig,flipInX,flipInY,flipOutX,flipOutY,lightSpeedIn,lightSpeedOut,rotateIn,rotateInDownLeft,rotateInDownRight,rotateInUpLeft,rotateInUpRight,rotateOut,rotateOutDownLeft,rotateOutDownRight,rotateOutUpLeft,rotateOutUpRight,hinge,jackInTheBox,rollIn,rollOut,zoomIn,zoomInDown,zoomInLeft,zoomInRight,zoomInUp,zoomOut,zoomOutDown,zoomOutLeft,zoomOutRight,zoomOutUp,slideInDown,slideInLeft,slideInRight,slideInUp,slideOutDown,slideOutLeft,slideOutRight,slideOutUp,heartBeat‘

var animalArr=animal.split(",")

var animalstr="";

for(var ia=0;ia<animalArr.length;ia++)

animalstr+=‘ <button class="animal layui-btn layui-btn-primary layui-btn-xs" name="‘+animalArr[ia]+‘">‘+animalArr[ia]+‘</button>‘

$("#animalCon").html(animalstr)

var arrcommon = [‘height‘, ‘width‘, ‘left‘, ‘top‘, ‘background‘, ‘border-radius‘, ‘border‘, ‘z-index‘]

$.fn.createBorder = function ()

$(".handler").remove();

var that = $(this);

var height = that.height();

var width = that.width();

var border = document.createElement("div");

border.style.width = (width) + "px"

border.style.height = (height) + "px"

border.style.position = "absolute";

border.style.top = "0px";

border.style.left = "0px";

border.style.cursor = "pointer";

border.classList.add("handler")

that.append(border)

var leftTop = document.createElement("div");

leftTop.style.width = "10px"

leftTop.style.height = "10px"

leftTop.style.position = "absolute";

leftTop.style.background = "black";

leftTop.style.top = "-10px";

leftTop.style.left = "-10px";

leftTop.style.cursor = "nw-resize";

leftTop.classList.add("handler")

that.append(leftTop)

var leftBottom = document.createElement("div");

leftBottom.style.width = "10px"

leftBottom.style.height = "10px"

leftBottom.style.position = "absolute";

leftBottom.style.background = "black";

leftBottom.style.bottom = "-10px";

leftBottom.style.left = "-10px";

leftBottom.style.cursor = "sw-resize";

leftBottom.classList.add("handler")

that.append(leftBottom)

var rightTop = document.createElement("div");

rightTop.style.width = "10px"

rightTop.style.height = "10px"

rightTop.style.position = "absolute";

rightTop.style.background = "black";

rightTop.style.top = "-10px";

rightTop.style.right = "-10px";

rightTop.style.cursor = "ne-resize";

rightTop.classList.add("handler")

that.append(rightTop)

var rightBottom = document.createElement("div");

rightBottom.style.border = "1px dashed green"

rightBottom.style.width = "10px"

rightBottom.style.height = "10px"

rightBottom.style.position = "absolute";

rightBottom.style.background = "black";

rightBottom.style.bottom = "-10px";

rightBottom.style.right = "-10px";

rightBottom.style.cursor = "se-resize";

rightBottom.classList.add("handler")

that.append(rightBottom)

var leftTopx = ""

var leftTopy = ""

var leftTopdown = false

var top = "";

var left = "";

$(leftTop).mousedown(function (e)

height = that.height();

width = that.width();

leftTopx = e.pageX;

leftTopy = e.pageY

leftTopdown = true

top = that.position().top;

left = that.position().left;

);

var leftBottomx = ""

var leftBottomy = ""

var leftBottomdown = false

var top1 = "";

var left1 = "";

$(leftBottom).mousedown(function (e)

height = that.height();

width = that.width();

leftBottomx = e.pageX;

leftBottomy = e.pageY

leftBottomdown = true

top1 = that.position().top;

left1 = that.position().left;

);

var rightTopx = ""

var rightTopy = ""

var rightTopdown = false

var top2 = "";

var left2 = "";

$(rightTop).mousedown(function (e)

height = that.height();

width = that.width();

rightTopx = e.pageX;

rightTopy = e.pageY

rightTopdown = true

top2 = that.position().top;

left2 = that.position().left;

);

var rightBottomx = ""

var rightBottomy = ""

var rightBottomdown = false

var top3 = "";

var left3 = "";

$(rightBottom).mousedown(function (e)

height = that.height();

width = that.width();

rightBottomx = e.pageX;

rightBottomy = e.pageY

rightBottomdown = true

top3 = that.position().top;

left3 = that.position().left;

);

var borderx = ""

var bordery = ""

var borderdown = false

var top4 = "";

var left4 = "";

$(border).mousedown(function (e)

height = that.height();

width = that.width();

borderx = e.pageX;

bordery = e.pageY

borderdown = true

top4 = that.position().top;

left4 = that.position().left;

);

$(document).mouseup(function (e)

leftBottomdown = false

leftTopdown = false

rightTopdown = false

rightBottomdown = false

borderdown = false

);

$(".vmobile").mousemove(function (e)

if (leftTopdown)

var x = e.pageX - leftTopx

var y = e.pageY - leftTopy

that.css("width", width - x).css("height", height - y)

that.css("top", top + y).css("left", left + x)

$.each(arrcommon, function (index, item)

$("#target_" + item).val(that.css(item))

)

if (leftBottomdown)

var x = e.pageX - leftBottomx

var y = e.pageY - leftBottomy

console.log(that.width() - x, that.height() - y);

that.css("width", width - x).css("height", height + y)

that.css("top", top1).css("left", left1 + x)

$.each(arrcommon, function (index, item)

$("#target_" + item).val(that.css(item))

)

if (rightTopdown)

var x = e.pageX - rightTopx

var y = e.pageY - rightTopy

that.css("width", width + x).css("height", height - y)

that.css("top", top2 + y).css("left", left2)

$.each(arrcommon, function (index, item)

$("#target_" + item).val(that.css(item))

)

if (rightBottomdown)

var x = e.pageX - rightBottomx

var y = e.pageY - rightBottomy

that.css("width", width + x).css("height", height + y)

that.css("top", top3).css("left", left3)

$.each(arrcommon, function (index, item)

$("#target_" + item).val(that.css(item))

)

if (borderdown)

var x = e.pageX - borderx

var y = e.pageY - bordery

that.css("top", top4 + y).css("left", left4 + x)

$.each(arrcommon, function (index, item)

$("#target_" + item).val(that.css(item))

)

);

$.each(arrcommon, function (index, item)

$("#target_" + item).val(that.css(item))

)

$("#target_id").val(that.attr("id"))

$("#createDiv").click(function ()

var div = document.createElement("div");

div.style.width = "180px"

div.style.height = "180px"

div.style.background = "gray"

div.style.border = "1px solid black";

div.style.position = "absolute";

div.style.left = "92px";

div.style.top = "92px";

var id = "handleId" + new Date().getTime()

div.setAttribute("id", id);

$(".vmobile").append(div)

$("#" + id).createBorder()

$("#" + id).addClass("mobileItem")

$("#" + id).click(function ()

$("#" + id).createBorder()

)

$("#submit").click(function ()

$(".handler").remove();

$.each(arrcommon, function (index, item)

$("#" + $("#target_id").val()).css(item, $("#target_" + item).val())

)

$("#insertButton").click(function ()

$("#" + $("#target_id").val()).html("<img src=‘" + $("#insertimgurl").val() +

"‘ style=‘width:100%;height:100%‘>")

)

$(".animal").click(function ()

$("#" + $("#target_id").val()).removeClass().addClass(‘mobileItem‘).addClass($(this).attr("name"))

)

$("#removeanimal").click(function ()

$("#" + $("#target_id").val()).removeClass().addClass(‘mobileItem‘)

)

function createHtml()

$(".handler").remove();

var header = ‘<!DOCTYPE html><html><head><meta name="format-detection" content="email=no" />‘ +

‘<meta name="apple-mobile-web-app-capable" content="yes" /><meta name="apple-mobile-web-app-status-bar-style" content="black" /><meta name="format-detection" content="telephone=no" />‘ +

‘<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">‘ +

‘<style>*padding:0;margin:0 .mobileItem animation-duration: 3s;animation-delay: .2s;animation-iteration-count: infinite;</style>‘ +

‘<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">‘ +

"<script>function resizing() var num = window.innerWidth;var font = num / 10;document.getElementsByTagName(‘html‘)[0].style.fontSize = font + ‘px‘ resizing(); window.onresize=function()resizing()<\/script>" +

‘</head><body>‘

var body = ($("#vmobile").html() + "").replace(/(\d+)px/g, function (a, b)

return b / 37.5 + "rem"

);

var footer = "</body></html>";

$("#code").val(header + body + footer)

</script>

</html>

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

Avalonia跨平台入门第十二篇之动画效果

[UWP]在UWP平台中使用Lottie动画

动画平台

我应该使用哪个平台来开发计算机网络的动画/模拟？

核心动画介绍(转)

GreenSock动画平台学习笔记LoaderMax