Skip to content
Permalink
Browse files

Update README.md

  • Loading branch information...
tombrewsviews committed Aug 26, 2019
1 parent 617aceb commit ba2d9cbcee6781b94611a5db9e8b5bcd39f81aba
Showing with 52 additions and 52 deletions.
  1. +52 −52 Animations/README.md
@@ -52,25 +52,25 @@ Say we want to animate the `width` of a simple button:

```
Button Vertical
backgroundColor red
onClick <
width 100
Label Text
text Hi
backgroundColor red
onClick <
width 100
Label Text
text Hi
```

First we need to add a condition (scope) to the Vertical. Animations
can be only triggered when the condition value changes (true/false):

```
Button Vertical
backgroundColor red
onClick <
width 100
when <isClicked
width 150
backgroundColor red
onClick <
width 100
when <isClicked
width 150
Label Text
text Hi
text Hi
```

Animations work on scopes and require base value on the base scope.
@@ -82,29 +82,29 @@ This wouldn't work (there is no width property on the base scope):

```
Button Vertical
## (base scope starts)
backgroundColor red
onClick <
## (base scope ends, isClicked scope starts)
when <isClicked
width 150
## (isClicked scope ends)
## (base scope starts)
backgroundColor red
onClick <
## (base scope ends, isClicked scope starts)
when <isClicked
width 150
## (isClicked scope ends)
Label Text
text Hi
text Hi
```

Add name of the curve after the value to animate any animatable property.
We want to animate `width` after the button is clicked, so we add `spring` after width's value in the `isClicked` scope:

```
ButtonAnimatedWidth Vertical
backgroundColor red
onClick <
width 100
when <isClicked
width 150 spring
backgroundColor red
onClick <
width 100
when <isClicked
width 150 spring
Label Text
text Hi
text Hi
```

Here's the code auto-generated by the Morpher from the ButtonAnimatedWidth.view file.
@@ -284,34 +284,34 @@ Here we are animating:

```
ButtonBounce Horizontal
alignItems center
backgroundColor #ffaa00
borderBottomLeftRadius 5
borderBottomRightRadius 5
borderTopLeftRadius 5
borderTopRightRadius 5
justifyContent center
onClick <
paddingBottom 10
paddingLeft 20
paddingRight 20
paddingTop 10
scale 1
when <isClicked
backgroundColor #00c276 linear
paddingLeft 100 easeIn
paddingRight 100 easeIn
scale 1.5 spring tension 20
alignItems center
backgroundColor #ffaa00
borderBottomLeftRadius 5
borderBottomRightRadius 5
borderTopLeftRadius 5
borderTopRightRadius 5
justifyContent center
onClick <
paddingBottom 10
paddingLeft 20
paddingRight 20
paddingTop 10
scale 1
when <isClicked
backgroundColor #00c276 linear
paddingLeft 100 easeIn
paddingRight 100 easeIn
scale 1.5 spring tension 20
Text
color #ffffff
fontFamily Montserrat
fontSize 18
fontWeight 400
text Click Me
when <isClicked
fontFamily Lobster
fontSize 28 linear
text Hurray!!!
color #ffffff
fontFamily Montserrat
fontSize 18
fontWeight 400
text Click Me
when <isClicked
fontFamily Lobster
fontSize 28 linear
text Hurray!!!
```

As you can see the text also changes when condition `isClicked` get's toggled on.

0 comments on commit ba2d9cb

Please sign in to comment.
You can’t perform that action at this time.