Barcelona 25 May 18
Vue core team
Author of VueFire 2, VueMotion, VueTweezing
Vue Instructor around Europe
Made with Nuxt!
I'm taking
my time
to appear...
v-if
v-show
key
v-for
:key
<transition name="fade" mode="out-in">
<router-view :key="$route.fullPath"/>
</transition>
How to go from one state to another
👎 rotation, translation, scaling
👍 opacity, colours, etc
👉 Basic Transition
computed: {
checkoutButtonClasses () {
return {
// apply a transition on colour
'is-disabled': this.cart.length > 0
}
}
}
Go from 10 to 100 Bouncing out in 1 second
10: initial value
100: target value
Bouncing out: Easing
1s: duration
👉 Easing graph
Go to 100 quickly and no oscillation
100: target value
quickly: high stiffness
no oscillation: low damping
👉 Motion graph
(or any other tweening lib)
// setup the animation loop
// (do it somewhere, but only once)
function animate(time) {
requestAnimationFrame(animate)
TWEEN.update(time)
}
requestAnimationFrame(animate)
const container = { x: 0 } // Tween modifies this
const tween = new TWEEN.Tween(container)
.to({ x: 300 }, 1000) // change to 300 in 1s
.easing(TWEEN.Easing.Quadratic.Out)
.onUpdate(() => {
// container.x is updated
})
.start() // Start the tween immediately.
Necessary boilerplate to create one single tween 😱
Originally from docs
by @chrisvfritz
👉 Polygon
<Tweezing
:to="stats"
:duration="updateInterval"
:easing="easing"
>
<polygon
slot-scope="pointsArray"
:points="transformToPoints(pointsArray)"
></polygon>
</Tweezing>
Using the scroll instead of time as input
👉 Easing with mouse
<Tweezing
:to="1" tween="custom"
:time="mouseYPer"
>
<div slot-scope="value">
<pre>{{ mouseYPer }}%</pre>
<div class="ball" :style="ballStyle(value)">
</div>
</div>
</Tweezing>
Watch target value ➡️ create Tween
Provide tweened value with a scoped slot
this.rotation // 10
this.rotation = 220
// triggers a new tweening
import {
Tweezing,
tweenjsHelper,
} from 'vue-tweezing'
import TWEEN from '@tweenjs/tween.js'
Vue.use(Tweezing, {
tweenjs: tweenjsHelper(TWEEN),
})
export function tweenjsHelper (TWEEN) {
return function (value, end, opts) {
const container = { value }
// cancel previous tween
return new TWEEN.Tween(container)
.to({ value: end }, opts.duration)
.interpolation(opts.interpolation || TWEEN.Interpolation.Linear)
.easing(opts.easing || TWEEN.Easing.Quadratic.Out)
// TODO should probably emit the name of the property too
// default could be the name if only one value is provided
.onStart(() => this.$emit('start'))
.onUpdate(() => {
opts.$setValue(container.value)
})
.onComplete(() => this.$emit('end'))
.start()
}
}
👉 Plot
<Motion tag="g" :values="selectedValues">
<template slot-scope="values">
<g v-for="(y, i) in values" class="bars">
<rect
:x="i * 10 + 20"
:y="getMax - y * 10"
width="10"
:height="y * 10"
/>
</g>
</template>
</Motion>
Originally from docs
by @chrisvfritz
👉 Sudoku
<Motion :values="positions" spring="wobbly">
<template slot-scope="positions">
<div v-for="cell in cells"
:style="{\
transform: `translate(\
${positions[cell.id].x}px,\
${positions[cell.id].y}px)\
`}"
>
{{ cell.number }}
</div>
</template>
</Motion>
⚠️ vue-motion and vue-tweezing are experimental
🗣Feedback is very welcome!