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