Popmotion
#react #javascript
http://popmotion.io
ロゴが古臭い
グラデーションボタンとかが時代を感じてしまうのだろう・・・
しかしその実めっちゃナウいアニメーションライブラリ
pose
popmotionの実質的なコアっぽいところ
reactとかvue向けに提供されてる
react
PoseGroup
https://popmotion.io/pose/api/posegroup/
アニメーションのひとまとまり
const Item = posed.div({...}) とかstyled-componetsっぽさ
RN対応や360対応もありそう
React Routerとの組み合わせもありそう。楽しい感じ
https://popmotion.io/pose/learn/route-transitions-react-router/
styled-components
https://popmotion.io/pose/api/posed/#posed-usage-styling-styled-components
code:js
// これでもいけるっぽい
const Styled = styled.div some css
const Posed = posed(Styled)({ ... })
css variable使って色変化
https://popmotion.io/pose/learn/css-variables/
valueの扱い
https://popmotion.io/api/value/
このへんか? https://popmotion.io/pose/api/posed/#posed-props-onvaluechange
https://popmotion.io/pose/api/posed/#posed-props-values/parentvalues
pose=XXXで任意にposeを指定して、それを状態の値として渡せる
code:js
// component
const Ball = posed(Circle)({
somePose: {
y: ({ y = 0 }) => y
}
})
// usage
<Ball
pose={"somePose"}
y={-100}
ただどうも↑これらはアニメーションするものではない?
stylefireで直接styleだけいじれば良いのでは?
pure
追加のアニメーション計算関連
https://popmotion.io/api/physics/ 物理演算っぽいのあって激アツ
stylefire
CSSをanimation向きにしている?
x -> transition-xのシュガーとか
それぞれのパッケージの関連性
https://github.com/Popmotion/popmotion/blob/master/CONTRIBUTING.md
from https://github.com/Popmotion/popmotion/blob/master/CONTRIBUTING.md
Sandbox
https://codesandbox.io/s/2z0336pr9y
とりあえず飛ぶやつ
https://codesandbox.io/s/kmnnpqzvxv
いくらかマシにジャンプするやつ