Angular (46) -- Angular Animations

LeetCode Day 26: P172. Factorial Trailing Zeroes (Easy)

题目：

给一个数n, n的阶乘末尾有几个零。

我的思路：

只有5乘以2能产生零，10的倍数能产生零。2有很多，5相对少一些，所以只要遇到一个5的倍数，就能产生一个零。

25里面能拆出来两个5, 所以凡是遇到25，125还有多加一个零或者两个零。

我的代码：（错误的）

class Solution {
    public int trailingZeroes(int n) {
        int pow = 1;
        int result = 0;
        while (n > 5 * pow) {
            result += n / (5 * pow);
            pow *= 5;
        }
        return result;
    }
}

整数越界了。因为pow会乘到很大。

最优解：

class Solution {
    public int trailingZeroes(int n) {
        int res = 0;
        while (n > 0) {
            res += n / 5;
            n /= 5;
        }
        return res;
    }
}

每次n都除以5，这样越除越小，就不会越界了。

Angular: Animations

Installation

• Install animation module

npm install --save @angular/animations

• Add the BrowserAnimationsModule to your imports[] array in AppModule

import { BrowserAnimationsModule } from '@angular/platform-browser/animations'

Animations Triggers and State

Animations in a component are set up in the @Component decorator. We define an animation array.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('divState', [
      state('normal', style({
        'background-color': 'red',
        transform: 'translateX(0)'
      })),
      state('highlighted', style({
        'background-color': 'blue',
        transform: 'translateX(100px)'
      }))
    ])
  ]
})
export class AppComponent {
  state = 'normal';
  list = ['Milk', 'Sugar', 'Bread'];

  onAdd(item) {
    this.list.push(item);
  }

  onDelete(item: string) {

  }

  onAnimate() {
    this.state === 'normal' ? this.state = 'highlighted' : this.state = 'normal';
  }
}

Each animation has a trigger. Trigger is a function. The first argument is the name we will put in our template which should trigger this animation. In the example above, we use divState as the name, then in the template:

<div
    style="width: 100px; height: 100px;"
    [@divState]="state">
</div>

We bind this animation with a property state, which is normal initially. Then, we can define some states in the trigger function.

The second argument in the trigger function defines the animation this trigger should toggle. It is an array. Each of the state in the array has a name and a style.

We used onAnimate() method to toggle these two states.

Transitions

Add transition functions in the trigger array.

animations: [
    trigger('divState', [
      state('normal', style({
        'background-color': 'red',
        transform: 'translateX(0)'
      })),
      state('highlighted', style({
        'background-color': 'blue',
        transform: 'translateX(100px)'
      })),
      transition('normal => highlighted', animate(300)),
      transition('highlighted => normal', animate(800)),
    ])
  ]

The state change expression in the transition function could be bi-directional.

transition('normal <=> highlighted', animate(300)),

We can also define more states and more transitions.

animations: [
    trigger('wildState', [
      state('normal', style({
        'background-color': 'red',
        transform: 'translateX(0) scale(1)'
      })),
      state('highlighted', style({
        'background-color': 'blue',
        transform: 'translateX(100px) scale(1)'
      })),
      state('shrunken', style({
        'background-color': 'green',
        transform: 'translateX(0) scale(0.5)'
      })),
      transition('normal => highlighted', animate(300)),
      transition('highlighted => normal', animate(800)),
      transition('shrunken <=> *', animate(500))
    ])
  ]
  
  
  onAnimate() {
      this.state === 'normal' ? this.state = 'highlighted' : this.state = 'normal';
      this.wildState === 'normal' ? this.wildState = 'highlighted' : this.wildState = 'normal';
    }
  
    onShrink() {
      this.wildState = 'shrunken';
    }

The star in the transition function means this shrunken state can be transferred to any state.

Transition Phases

We can also define a style during the animation.

trigger('wildState', [
      state('normal', style({
        'background-color': 'red',
        'border-radius': '0',
        transform: 'translateX(0) scale(1)'
      })),
      state('highlighted', style({
        'background-color': 'blue',
        'border-radius': '0',
        transform: 'translateX(100px) scale(1)'
      })),
      state('shrunken', style({
        'background-color': 'green',
        'border-radius': '0',
        transform: 'translateX(0) scale(0.5)'
      })),
      transition('normal => highlighted', animate(300)),
      transition('highlighted => normal', animate(800)),
      transition('shrunken <=> *', [
        style({
          'background-color': 'orange'
        }),
        animate(1000, style({
          'border-radius': '50px',
        })),
        animate(500)
      ])
    ])

We can have an array as the second argument in the transition function.

• Note that we need to set the initial value of border-radius to 0.