BlAnimationExamples

I contain examples of Bloc's Animation framework.

~

botwhytho via [discord](https://discord.com/channels/729445214812504107/735945764597006466/976986835601473627) Any pointers on how to go about adding animations to something like a `BlLineElement`? For example a moving arrow/shape going from the 'from' to the 'to' side?

Adrian Sampaleanu — Not quite an answer to your particular question, but a pretty good example of a more complex animation -

BlAnimationExamples >> #bouncingText.

You need to click on the text to get it to move.

HTML5 mp4 https://wiki.ralfbarkow.ch/assets/pages/blanimationexamples/BlAnimationExamples.mov bouncingText

bouncingText "Click on letters to start animation!" | letters container animation clickHandler | <gtExample> letters := 'bloc beta0.1' collect: [ :aCharacter | self textElement: aCharacter ] as: Array. letters withIndexDo: [ :aTextElement :anIndex | "change text color according to index in color spectrum" aTextElement text: (aTextElement text foreground: (self colorAt: (anIndex / letters size) asFloat)) ]. animation := BlParallelAnimation with: (letters withIndexCollect: [ :aChild :anIndex | | jiggle | jiggle := self jiggleAnimation. jiggle delay: 20 milliSeconds * (anIndex - 1). jiggle target: aChild. jiggle ]). container := self textContainer. container addChildren: letters. clickHandler := nil. clickHandler := BlEventHandler on: BlClickEvent do: [ container removeEventHandler: clickHandler. container addAnimation: animation ]. container addEventHandler: clickHandler. ^ self frameContainer addChild: container

pages/blanimationexamples