3

I want to rotate an image based on a value from a slider using Angular animation. I can get the animation triggered using value change notifier :increment & :decrement. But can't use the latest value in the css properties in animate style block.

My code so far looks like this-

for binding in template-

<mat-slider [(ngModel)]="rotationAngle" ...>
<img [@photoState]="rotationAngle" src="...">

in component class declaration-

  rotationAngle: number = 0;

  constructor() { }

  ngOnInit() {
    this.rotationAngle = 0;
  }

  get stateName() {
    return this.rotationAngle;
  }

now in @Component block- 

animations: [
     trigger('photoState',
       [
          transition(':increment, :decrement', [
                    style('*'),
                    animate('500ms', style({transform: 'rotate({{ rotationAngle }}deg)'}))
              ],{
                  params: {
                    rotationAngle:  ... /* need to use the slider value here, I assume. Any other way? */
                  }
              })
        ])
  ]

Is there any way to do this? Should I try some other approach like AnimationBuilder (maybe) ?

Sanky
  • 193
  • 13

2 Answers2

2

I have tried to rotate a div using angular animations, basically i have followed the parent child kind of components relationship, where parent passes the angle using to rotate the div, which child accepts it using @Input and i have used that value in the animations , to rotate

here the link you can take a look at it https://stackblitz.com/edit/angular-animations-params

my bad i have not followed proper naming conventions.....

ravi
  • 1,127
  • 9
  • 10
  • That works, do you know what's the difference between making it a @Input param and declaring it as member and listening to its onchange? The second approach doesn't seem to work though. – Sanky Aug 10 '18 at 02:28
1

Though what @ravi has posted works, I think using a AnimationBuilder is a better approach. What I did is -

    /* use attribute #imageContainer with the element you want to perform animation on */        
    @ViewChild("imageContainer") imageContainerElement: ElementRef;

    rotationAngle:number;

    let animationFactory = this.animationBuilder.build([
                  style('*'),
                  animate('500ms', style({transform: 'rotate(' + this.rotationAngle + 'deg)'}))
                ]);

   animationFactory.create(this.imageContainerElement.nativeElement).play();

This solves my problem.

Sanky
  • 193
  • 13