Πώς να δημιουργήσετε animation κούνημα στη γωνιακή 6;

ψήφοι
-2

Πώς μπορούμε να δημιουργήσουμε ένα animation κούνημα χρησιμοποιώντας γωνιακή 6 κινούμενα σχέδια; Η κίνηση θα πρέπει να μοιάζει με κινούμενα σχέδια «κούνημα» τουAnimate.css

Δημοσιεύθηκε 20/10/2018 στις 12:35
πηγή χρήστη
Σε άλλες γλώσσες...                            


1 απαντήσεις

ψήφοι
4

Αυτό είναι λίγο δύσκολο, αν θέλετε να εφαρμόσετε το animation με διάφορα στοιχεία μέσα σε ένα συστατικό σε γωνιακή 6:

app.component.html:

<p [@shakeit]="this.states['state1']" (click)="shakeMe('state1')" (@shakeit.done)="shakeEnd('state1', $event)">Click me</p>

<p [@shakeit]="this.states['state2']" (click)="shakeMe('state2')" (@shakeit.done)="shakeEnd('state2', $event)">Click me</p>

app.component.ts:

import { Component } from '@angular/core';
import { trigger,state,style,transition,animate,keyframes } from    '@angular/animations';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  animations: [
    trigger('shakeit', [
        state('shakestart', style({
            transform: 'scale(1)',
        })),
        state('shakeend', style({
            transform: 'scale(1)',
        })),
        transition('shakestart => shakeend', animate('1000ms ease-in',     keyframes([
          style({transform: 'translate3d(-1px, 0, 0)', offset: 0.1}),
          style({transform: 'translate3d(2px, 0, 0)', offset: 0.2}),
          style({transform: 'translate3d(-4px, 0, 0)', offset: 0.3}),
          style({transform: 'translate3d(4px, 0, 0)', offset: 0.4}),
          style({transform: 'translate3d(-4px, 0, 0)', offset: 0.5}),
          style({transform: 'translate3d(4px, 0, 0)', offset: 0.6}),
          style({transform: 'translate3d(-4px, 0, 0)', offset: 0.7}),
          style({transform: 'translate3d(2px, 0, 0)', offset: 0.8}),
          style({transform: 'translate3d(-1px, 0, 0)', offset: 0.9}),
        ]))),
  ])]
})
export class AppComponent  {
  states = {};

  constructor() {
    this.states['state1'] = 'shakestart';
    this.states['state2'] = 'shakestart';
  }

  shakeMe(stateVar: string) {
        this.states[stateVar] = (this.states[stateVar] === 'shakestart' ? 'shakeend' : 'shakestart');
  }

  shakeEnd(stateVar: string, event) {
    this.states[stateVar] = 'shakeend';
  }
}

Βλέπετε, μπορώ να χρησιμοποιήσω ένα λεξικό για τα κινούμενα σχέδια πολιτείες των διαφόρων στοιχείων HTML. Ως εκ τούτου, είναι λίγο περισσότερη δουλειά και γενικά αν θέλετε να χρησιμοποιήσετε γωνιακή 6. shakeMeμέθοδο ξεκινά την κινούμενη εικόνα.

Ωστόσο, θα ήθελα να συστήσω να χρησιμοποιήσετε μόνο τα βασικά καρέ CSS επειδή είναι πιο εύκολο να συνειδητοποιήσουμε για διάφορα στοιχεία html. Το ακόλουθο παράδειγμα κάνει το ίδιο animation. Απλά πρέπει να εφαρμόσει τη σωστή κατηγορία css στο στοιχείο html.

.shakeit:hover {
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

@keyframes shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}
<h2 class="shakeit">Hover me</h2>

Απαντήθηκε 20/10/2018 στις 13:13
πηγή χρήστη

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more