Skip to content

Commit 674947f

Browse files
gcotelligcotelli
authored
Merge pull request #34 from ba-st/keyframesSupport
Animation support
2 parents a09598c + 7668091 commit 674947f

25 files changed

+1391
-1
lines changed

‎docs/tutorial/Tutorial-Part-I.md‎

Lines changed: 351 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -434,6 +434,357 @@ renders as:
434434
```css
435435
repeating-radial-gradient(yellow, green);
436436
```
437+
#### Transforms
438+
Css transforms are a collection of functions that allow you to shape elements in particular ways.
439+
##### Rotation: `rotate()` `rotateX()` `rotateY()` `rotateZ()` `rotate3d()`
440+
441+
The library provides support for rotation functions, used in animations to move an element around a central point. The rotate expressions are built instantiating `CssRotate` or `CssRotate3D` for 3D rotations.
442+
443+
Lets see a basic working rotation example:
444+
```smalltalk
445+
CascadingStyleSheetBuilder new
446+
declareRuleSetFor: [ :selector | selector div ]
447+
with: [ :style |
448+
style
449+
animation: 'spin 5s linear infinite';
450+
width: 100 px;
451+
height: 100 px ];
452+
declare: [ :cssBuilder |
453+
cssBuilder
454+
declareKeyframeRuleSetAt: 0 percent
455+
with: [ :style |
456+
style
457+
transform: (CssRotate by: 0 deg);
458+
background: #blue ];
459+
declareKeyframeRuleSetAt: 100 percent
460+
with: [ :style |
461+
style
462+
transform: (CssRotate by: 360 deg);
463+
background: #red ] ]
464+
forKeyframesNamed: 'spin';
465+
build
466+
```
467+
Evaluates to:
468+
```css
469+
div
470+
{
471+
animation: spin 5s linear infinite;
472+
width: 100px;
473+
height: 100px;
474+
}
475+
476+
@keyframes spin
477+
{
478+
0%
479+
{
480+
transform: rotate(0deg);
481+
background: blue;
482+
}
483+
484+
100%
485+
{
486+
transform: rotate(360deg);
487+
background: red;
488+
}
489+
}
490+
```
491+
492+
##### Translation: `translate()` `translateX()` `translateY()` `translateZ()` `translate3d()`
493+
494+
The library supports `translate` functions, used to mode the position of an element. To translate an element, instantiate `CssTranslate`.
495+
496+
Lets see an example:
497+
```smalltalk
498+
CascadingStyleSheetBuilder new
499+
declareRuleSetFor: [ :selector | selector div ]
500+
with: [ :style |
501+
style
502+
background: #blue;
503+
animation: 'animation 5s linear infinite';
504+
width: 100 px;
505+
height: 100 px ];
506+
declare: [ :cssBuilder |
507+
cssBuilder
508+
declareKeyframeRuleSetAt: 0 percent
509+
with: [ :style |
510+
style
511+
transform: (CssTranslate by: 100 px) ] ]
512+
forKeyframesNamed: 'animation';
513+
build.
514+
```
515+
Evaluates to:
516+
```css
517+
div
518+
{
519+
background: blue;
520+
animation: animation 5s linear infinite;
521+
width: 100px;
522+
height: 100px;
523+
}
524+
525+
@keyframes animation
526+
{
527+
0%
528+
{
529+
transform: translate(100px);
530+
}
531+
}
532+
```
533+
534+
##### Scale: `scale()` `scaleX()` `scaleY()` `scaleZ()` `scale3d()`
535+
536+
RenoirSt supports scaling functions. You can use them by building an instance of `CssScale`.
537+
538+
An example can be:
539+
```smalltalk
540+
CascadingStyleSheetBuilder new
541+
declareRuleSetFor: [ :selector | selector div ]
542+
with: [ :style |
543+
style
544+
background: #blue;
545+
animation: 'scale 5s linear infinite';
546+
width: 100 px;
547+
height: 100 px ];
548+
declare: [ :cssBuilder |
549+
cssBuilder
550+
declareKeyframeRuleSetAt: 0 percent
551+
with: [ :style |
552+
style transform: (CssScale by: 2) ];
553+
declareKeyframeRuleSetAt: 100 percent
554+
with: [ :style |
555+
style transform: (CssScale by: 4) ] ]
556+
forKeyframesNamed: 'scale';
557+
build.
558+
```
559+
Evaluating to:
560+
```css
561+
div
562+
{
563+
background: blue;
564+
animation: scale 5s linear infinite;
565+
width: 100px;
566+
height: 100px;
567+
}
568+
569+
@keyframes scale
570+
{
571+
0%
572+
{
573+
transform: scale(2);
574+
}
575+
576+
100%
577+
{
578+
transform: scale(4);
579+
}
580+
}
581+
```
582+
583+
##### Skew `skew()` `skewX()` `skewY()`
584+
585+
The library supports the `skew` function, performing a shear transformation (also known as a shear mapping or a transvection), which displaces each point of an element by a given angle in each direction. To build skew functions, instantiate `CssSkew`.
586+
587+
An example:
588+
```smalltalk
589+
CascadingStyleSheetBuilder new
590+
declareRuleSetFor: [ :selector | selector div ]
591+
with: [ :style |
592+
style
593+
background: #blue;
594+
animation: 'skewAnimation 5s linear infinite';
595+
width: 100 px;
596+
height: 100 px ];
597+
declare: [ :cssBuilder |
598+
cssBuilder
599+
declareKeyframeRuleSetAt: 0 percent
600+
with: [ :style | style transform: (CssSkew by: 45 deg) ] ]
601+
forKeyframesNamed: 'skewAnimation';
602+
build
603+
```
604+
Evaluates to:
605+
```css
606+
div
607+
{
608+
background: blue;
609+
animation: skewAnimation 5s linear infinite;
610+
width: 100px;
611+
height: 100px;
612+
}
613+
614+
@keyframes skewAnimation
615+
{
616+
0%
617+
{
618+
transform: skew(45deg);
619+
}
620+
}
621+
```
622+
623+
##### Aditional Functions for Transformation
624+
###### Perspective
625+
626+
The library supports the `perspective` function by instantiating `CssPerspective`.
627+
This function is used to set a perspective when doing a transformation on the Z axis.
628+
629+
If we extend the previous example to translate in a 3D space, it would be like:
630+
```smalltalk
631+
CascadingStyleSheetBuilder new
632+
declareRuleSetFor: [ :selector | selector div ]
633+
with: [ :style |
634+
style
635+
background: #blue;
636+
animation: 'animation 5s linear infinite';
637+
width: 100 px;
638+
height: 100 px ];
639+
declare: [ :cssBuilder |
640+
cssBuilder
641+
declareKeyframeRuleSetAt: 0 percent
642+
with: [ :style |
643+
style
644+
transform:
645+
{(CssPerspective of: 200 px) .
646+
(CssTranslate
647+
onXAxisBy: 100 px
648+
onYAxisBy: 100 px
649+
andZAxisBy: 100 px )} ] ]
650+
forKeyframesNamed: 'animation';
651+
build.
652+
```
653+
Evaluating to:
654+
```css
655+
div
656+
{
657+
background: blue;
658+
animation: animation 5s linear infinite;
659+
width: 100px;
660+
height: 100px;
661+
}
662+
663+
@keyframes animation
664+
{
665+
0%
666+
{
667+
transform: perspective(200px) translate3d(100px, 100px, 100px);
668+
}
669+
}
670+
```
671+
672+
#### Easing Functions
673+
674+
##### Steps
675+
676+
The library also supports the `steps` function, used in the timing parameter of animation keyframes called `animation-timing-function`. Steps are a timing function that allows us to break an animation or transition into segments.
677+
678+
A usage example can be:
679+
```smalltalk
680+
CascadingStyleSheetBuilder new
681+
declareRuleSetFor: [ :selector | selector div ]
682+
with: [ :style |
683+
style
684+
background: #blue;
685+
animationName: 'scale';
686+
animationDuration: 5 s;
687+
animationTimingFunction: (CssSteps by: 2);
688+
animationIterationCount: #infinite;
689+
width: 100 px;
690+
height: 100 px ];
691+
declare: [ :cssBuilder |
692+
cssBuilder
693+
declareKeyframeRuleSetAt: 0 percent
694+
with: [ :style |
695+
style transform: (CssScale by: 2) ];
696+
declareKeyframeRuleSetAt: 100 percent
697+
with: [ :style |
698+
style transform: (CssScale by: 4) ] ]
699+
forKeyframesNamed: 'scale';
700+
build.
701+
```
702+
Evaluating to:
703+
```css
704+
div
705+
{
706+
background: blue;
707+
animation-name: scale;
708+
animation-duration: 5s;
709+
animation-timing-function: steps(2);
710+
animation-iteration-count: infinite;
711+
width: 100px;
712+
height: 100px;
713+
}
714+
715+
@keyframes scale
716+
{
717+
0%
718+
{
719+
transform: scale(2);
720+
}
721+
722+
100%
723+
{
724+
transform: scale(4);
725+
}
726+
}
727+
```
728+
729+
##### Cubic Bezier
730+
731+
Renoir supports the `cubic-bezier` function, that can be used with the `transition-timing-function` property to control how a transition will change speed over its duration. It also works with the `animation-timing-function` for keyframes. To create your own cubic bezier timing function build an instance with `CssCubicBezier`.
732+
733+
Here's an example:
734+
```smalltalk
735+
CascadingStyleSheetBuilder new
736+
declareRuleSetFor: [ :selector | selector div ]
737+
with: [ :style |
738+
style
739+
background: #blue;
740+
animationName: 'scale';
741+
animationDuration: 5 s;
742+
animationTimingFunction: (
743+
CssCubicBezier
744+
firstXAxis: 0.63
745+
firstYAxis: 0.05
746+
secondXAxis: 0.43
747+
secondYAxis: 1.7);
748+
animationIterationCount: #infinite;
749+
width: 100 px;
750+
height: 100 px ];
751+
declare: [ :cssBuilder |
752+
cssBuilder
753+
declareKeyframeRuleSetAt: 0 percent
754+
with: [ :style |
755+
style transform: (CssScale by: 2) ];
756+
declareKeyframeRuleSetAt: 100 percent
757+
with: [ :style |
758+
style transform: (CssScale by: 4) ] ]
759+
forKeyframesNamed: 'scale';
760+
build.
761+
```
762+
Evaluating to:
763+
```css
764+
div
765+
{
766+
background: blue;
767+
animation-name: scale;
768+
animation-duration: 5s;
769+
animation-timing-function: cubic-bezier(0.63, 0.05, 0.43, 1.7);
770+
animation-iteration-count: infinite;
771+
width: 100px;
772+
height: 100px;
773+
}
774+
775+
@keyframes scale
776+
{
777+
0%
778+
{
779+
transform: scale(2);
780+
}
781+
782+
100%
783+
{
784+
transform: scale(4);
785+
}
786+
}
787+
```
437788

438789
#### Box Shadows
439790

0 commit comments

Comments
 (0)