这里先给popmotion的官方地址www.popmotion.io/
当然作为出色的轻量级动画，github上面也是有的github.com/Popmotion/p…
看着这么出色的颜色搭配和设计，都已经忍不住想要使用的，咱们在学习
前端的时候，也不要忘记我们的审美也是很高的，虽然和出色的UI设计师还有点距离吧，我们也要学会欣赏。
我们新建一个index.html：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="./animation.css"></head><body> <h1>Animtion</h1> <div class="box">
</div> <script src="https://unpkg.com/popmotion@8.1.24/dist/popmotion.global.min.js"></script> <script src="./animation.js"></script></body></html>复制代码这里我们引入popmotion的js，并且引入了本地的css代码 和 animation.js代码，我们新建animation.css代码：
.box {
width: 100px;
height: 100px;
background-color: #0074d9;
border-radius: 50%;
}
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 400px;
}复制代码再创建一个animation.js文件：
const ball = document.querySelector(".box");
const divStyle = popmotion.styler(ball);
const ballXY = popmotion.value({ x:0,y:0},divStyle.set);
popmotion.listen(ball,"mousedown touchstart").start(e => {
e.preventDefault();
popmotion.pointer(ballXY.get()).start(ballXY);
});
popmotion.listen(document,"mouseup").start(() => {
popmotion
.spring({
x: -10,
y: -10,
background: 'rgba(161, 0, 246, 1)',
boxShadow: '10px 10px 20px rgba(161, 0, 246, 0.2)',
transition: { duration: 700 }
})
.start(ballXY);})复制代码我们就可以看到下面的模样
当然这些js是popmotion API文档中的，我们可以根据他们API才制作我们自己想要的动画.
有一个问题就是一般的网站都是拥有至少10个的依赖项，而且如果我们把所有的脚本都放在HTML下也是不可行的，接下来我们有一种方法可以解决这个问题
我们现在本地安装node.js，然后我们安装Parcel工具，他可以将所有的代码都捆绑到一个小包中
cnpm install --global parcel-bundler
1、我们去删除inde.html文件中的
<script src="https://unpkg.com/popmotion@8.1.24/dist/popmotion.global.min.js"></script>复制代码2、在animation.js中第一行引入popmotion：
const popmotion = require("popmotion");复制代码3、执行命令cnpm init -y，此时在项目的根目录下会生成一个package.json
文件，这个文件是node配置的方式。
cnpm init -y复制代码4、执行命令,从服务器下载popmotion文件，辞职执行成功之后会在你的项目文件中新增一个node_modules目录
cnpm install popmotion复制代码5、执行命令 ，他会告诉你一个服务器在http://localhost:1234运行所花费的时间
parcel index.html
复制代码我们在本地输入localhost:1234.就会看到我们的项目也在运行