Javascript或JQuery中div的抛物线动画

我是Javascript新手。我想制作这样的动画：

首先是一个封闭的袋子图片。当人们点击袋子图片时，图片将变为开放的袋子

然后，对象（我不知道javascipt，我指的是包含图像的div）开始从带有抛物线动画的包中出来。当动画完成时，所有项目都将与包在相同的基础上（对齐）

然后，对象将开始向右移动。除第一个项目外，每个项目都有延迟，因为ms之间也有空格。如下所示：

$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$（“div.2”）.animate（{左：'70vw'}）；
$（“div.1”）.delay（800）。动画（{left:'40vw'}）；
});
});
启动动画
默认情况下，所有HTML元素都有一个静态位置，不能移动。要操作位置，请记住首先将元素的CSS position属性设置为相对、固定或绝对

x

一些基本的CSS动画，希望能帮助您入门

$（文档）.ready（函数（）{
$（“.bag”）。在（“单击”，函数（）{
$（此）.toggleClass（“打开”）；
});
});
.bag{
显示：块；
宽度：120px；
高度：120px；
背景色：#ff0；
位置：相对位置；
顶部：150px；
左：150px；
光标：指针；
}
.持有人{
位置：绝对位置；
排名：0；
左：0；
}
.面具{
位置：绝对位置；
排名：0；
左：0；
宽度：120px；
高度：60px；
背景色：#ff0；
显示：块；
}
多特先生{
位置：绝对位置；
左：35px；
排名：0；
}
.点：：之后{
内容：''；
显示：块；
宽度：50px；
高度：50px；
边界半径：50px；
z指数：1；
}
.dot1：：之后{
背景色：#333；
}
.dot2：：之后{
背景色：#00a；
}
.袋子，打开，
.袋子.打开.面具{
背景色：#f00；
}
.bag.open.dot1{
动画：xAxis1 2.5s立方贝塞尔（0.02,0.01,0.21,1）；
动画填充模式：正向；
}
.bag.open.dot1:：之后{
动画：yAxis1 2.5s立方贝塞尔（0.3,0.27,0.07,1.64）；
动画填充模式：正向；
}
.bag.open.dot2{
动画：xAxis2 2.5s立方贝塞尔（0.02,0.01,0.21,1）；
动画填充模式：正向；
}
.bag.open.dot2:：之后{
动画：yAxis2 2.5s立方贝塞尔（0.3,0.27,0.07,1.64）；
动画填充模式：正向；
}
@关键帧yAxis1{
50% {
动画计时功能：立方贝塞尔（0.02,0.01,0.21,1）；
转换：translateY（-100px）；
}
100% {
动画计时功能：立方贝塞尔（0.02,0.01,0.21,1）；
变换：translateY（70px）；
}
}
@关键帧xAxis1{
100% {
动画计时功能：立方贝塞尔（0.3,0.27,0.07,1.64）；
转换：translateX（150px）；
}
}
@关键帧yAxis2{
50% {
动画计时功能：立方贝塞尔（0.02,0.01,0.21,1）；
转换：translateY（-80px）；
}
100% {
动画计时功能：立方贝塞尔（0.02,0.01,0.21,1）；
变换：translateY（70px）；
}
}
@关键帧xAxis2{
100% {
动画计时功能：立方贝塞尔（0.3,0.27,0.07,1.64）；
转换：translateX（-120px）；
}
}
第二种解决方案。这是一个纯JavaScript动画，使用库和工具绘制路径


$（文档）.ready（函数（）{
变量路径=[
“M 160 120 Q 160 30 210 30 Q 270 30 240 180”，
“M 160 120 Q 160 30 110 30 Q 60 40 60 180”，
“M 160 120 Q 160 30 210 50 Q 280 80 300 180”
];
var walkers=[]；
函数AnimateWalker（步行者，索引）{
this.pathAnimator=新的pathAnimator（路径[索引]{
持续时间：3，
步骤：此步骤绑定（此），
反面：错，
onDone:这个.完成.绑定（这个）
});
this.walker=walker；
}
AnimateWalker.prototype={
开始：函数（）{
this.startOffset=（this.reverse | | this.speed<0）？100:0；
这个.pathAnimator.start（）；
},
步骤：功能（点、角度）{
var stretchFactor=1，
比例=25+此.pathAnimator.percent/4；
标度=（标度/30）+0.5；
this.walker.style.cssText=“top:+point.y*stretchFactor+”px+
“左：”+point.x*stretchFactor+“px；”+
“变换：旋转（“+角度+”度）比例（“+比例+”）”；
},
完成：函数（）{
这个.pathAnimator.stop（）；
},
恢复：函数（）{
this.pathAnimator.start（this.speed、this.step、this.reverse、this.pathAnimator.percent、this.finish、this.easing）；
}
}
函数生成器访问器（walkerObj）{
var newAnimatedWalker=newanimateWalker（walkerObj，walkers.length）；
walkers.push（newAnimatedWalker）；
返回newAnimatedWalker；
}
$（“.box”）。在（“单击”，函数（）{
if（！$（'.wrapper'）.hasClass（“打开”））{
$（'img'）。每个函数（k，v）{
generateWalker（v.start（）；
});
$（'.wrapper'）.addClass（“打开”）；
}否则{
$（'.wrapper'）.removeClass（“打开”）；
$（步行者）。每个（功能（k，v）{
v、 完成（）；
});
walkers=[]；
}
});
});
img{
位置：绝对位置；
宽度：40px；
显示：无；
}
.包装纸{
位置：相对位置；
显示：内联块；
宽度：480px；
高度：240px；
背景色：#fff；
}
.场地{
背景色：#0a0；
宽度：100%；
位置：绝对位置；
底部：0；
高度：2倍；
左：0；
}
.盒子{
位置：绝对位置；
背景色：#f00；
宽度：100px；
高度：100px；
顶部：120px；
左：120px；
背景：url（'https://st2.depositphotos.com/1431107/6391/v/950/depositphotos_63919095-stock-illustration-open-and-closed-box-icon.jpg');
背景大小：220%；
背景位置：-7px-20px；
背景重复：无重复；
}
.wrapper.open.box{
背景位置：-108px-20px；
}
.wrapper.openimg{
显示：块；
}

这里有一篇文章可以帮助您：如果您有打开和关闭的袋子图片的链接，我可以创建一个片段供您尝试。是的，有。谢谢，我会发帖的it@BlackWiCKED这是：首先我