popmotion ——2017年最火的动画集合

最新推荐文章于 2024-05-28 14:42:34 发布

weixin_33881140

最新推荐文章于 2024-05-28 14:42:34 发布

阅读量677

点赞数

文章标签：前端 ui javascript ViewUI

原文链接：https://juejin.im/post/5c7766f6f265da2dcf62977f

版权

这里先给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.就会看到我们的项目也在运行

weixin_33881140

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
popmotion ——2017年最火的动画集合

这里先给popmotion的官方地址www.popmotion.io/当然作为出色的轻量级动画，github上面也是有的github.com/Popmotion/p…看着这么出色的颜色搭配和设计，都已经忍不住想要使用的，咱们在学习前端的时候，也不要忘记我们的审美也是很高的，虽然和出色的UI设计师还有点距离吧，我们也要学会欣赏。我们新建一个index.html：&lt;!DOCTYPE html&g...
复制链接

扫一扫