{"id":55,"date":"2024-03-12T16:08:15","date_gmt":"2024-03-12T16:08:15","guid":{"rendered":"https:\/\/devforever.fr\/oceanrangers\/?p=55"},"modified":"2024-03-12T16:09:55","modified_gmt":"2024-03-12T16:09:55","slug":"55","status":"publish","type":"post","link":"https:\/\/devforever.fr\/oceanrangers\/2024\/03\/12\/55\/","title":{"rendered":"10. Animations widgets"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; _builder_version=&#8221;4.24.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_row _builder_version=&#8221;4.24.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.24.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_text _builder_version=&#8221;4.24.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<p>Now that our game arrive in the final stage, and with the one week extention of the deadline, I wanted to add more for the introduction. A propper introduction give the basic of the lore to the player to properly enjoy what the game has to offer. And for now, we only have a tiny message window, wheras we have written a story. So let&#8217;s fix this, and with the help of the <strong>Animations<\/strong> widgets.<\/p>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.24.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.24.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_heading title=&#8221;Animations widgets ?&#8221; _builder_version=&#8221;4.24.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_heading][et_pb_text _builder_version=&#8221;4.24.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<p>Basicly, there widget have been added to add the possibility of animating things. In fact, the widget list is pretty long with some varieties of movement allowed from the Fade to linear or non linear movement, you just need to find the right widget for you. I will not go into detail, has all widget may have diffrent attribute and functions that can be triggered. The Flutter documentation explain all you need to know for each widget.<\/p>\n<p>The Flutter documentation for animations widgets can be found here : <a href=\"https:\/\/docs.flutter.dev\/ui\/widgets\/animation\">https:\/\/docs.flutter.dev\/ui\/widgets\/animation<\/a><\/p>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.24.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.24.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_heading title=&#8221;What to build&#8221; _builder_version=&#8221;4.24.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_heading][et_pb_text _builder_version=&#8221;4.24.2&#8243; _module_preset=&#8221;default&#8221; hover_enabled=&#8221;0&#8243; global_colors_info=&#8221;{}&#8221; sticky_enabled=&#8221;0&#8243;]<\/p>\n<p>At this stage, my idea is to simply build a mini comic strip with few animations to understand what his happening at the player and why we have joined the mission.To create this, I have started by creating four diffrent box to have some image on it:<\/p>\n<p>&nbsp;<\/p>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/devforever.fr\/oceanrangers\/wp-content\/uploads\/2024\/03\/anim0-1024&#215;558.png&#8221; _builder_version=&#8221;4.24.2&#8243; _module_preset=&#8221;default&#8221; title_text=&#8221;anim0&#8243; hover_enabled=&#8221;0&#8243; sticky_enabled=&#8221;0&#8243;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.24.2&#8243; _module_preset=&#8221;default&#8221; hover_enabled=&#8221;0&#8243; sticky_enabled=&#8221;0&#8243;]<\/p>\n<p>Then, I added some images to each to tell the story. But that is not all, in fact, without animation, it is pretty boring to look and it does not impact us. So, to better handle that, I have used the famous animations widget!<br \/>There are a lot of different animation types, as you can see in the documentation linked previously. I have chosen to use those: <br \/>The AnimatedCrossFade Widget makes the transition between the gray box and the images.<\/p>\n<div>\n<div><span>The AnimatedAlign Widget to make a letter fly to the mailbox.<\/span><\/div>\n<div><span><span>And the <\/span><\/span>AnimatedRotation widget to make a cool effect on the journal.<\/div>\n<\/div>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.24.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.24.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_heading title=&#8221;The result&#8221; _builder_version=&#8221;4.24.2&#8243; _module_preset=&#8221;default&#8221; hover_enabled=&#8221;0&#8243; global_colors_info=&#8221;{}&#8221; sticky_enabled=&#8221;0&#8243;][\/et_pb_heading][et_pb_image src=&#8221;https:\/\/devforever.fr\/oceanrangers\/wp-content\/uploads\/2024\/03\/endintro.png&#8221; _builder_version=&#8221;4.24.2&#8243; _module_preset=&#8221;default&#8221; title_text=&#8221;endintro&#8221; hover_enabled=&#8221;0&#8243; sticky_enabled=&#8221;0&#8243;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.24.2&#8243; _module_preset=&#8221;default&#8221; hover_enabled=&#8221;0&#8243; global_colors_info=&#8221;{}&#8221; sticky_enabled=&#8221;0&#8243;]<\/p>\n<p>In the end, I find our new introduction pretty cool with an understandable story. If you want to try it, you can, by joining our game \ud83d\ude09 <a href=\"https:\/\/devforever.fr\/oceanrangers\/game\/v1\/\">Join our game !<\/a><\/p>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Let&#8217;s make some fun with animation widget<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[3],"tags":[],"class_list":["post-55","post","type-post","status-publish","format-standard","hentry","category-our-game-creation"],"_links":{"self":[{"href":"https:\/\/devforever.fr\/oceanrangers\/wp-json\/wp\/v2\/posts\/55","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devforever.fr\/oceanrangers\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devforever.fr\/oceanrangers\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devforever.fr\/oceanrangers\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/devforever.fr\/oceanrangers\/wp-json\/wp\/v2\/comments?post=55"}],"version-history":[{"count":4,"href":"https:\/\/devforever.fr\/oceanrangers\/wp-json\/wp\/v2\/posts\/55\/revisions"}],"predecessor-version":[{"id":94,"href":"https:\/\/devforever.fr\/oceanrangers\/wp-json\/wp\/v2\/posts\/55\/revisions\/94"}],"wp:attachment":[{"href":"https:\/\/devforever.fr\/oceanrangers\/wp-json\/wp\/v2\/media?parent=55"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devforever.fr\/oceanrangers\/wp-json\/wp\/v2\/categories?post=55"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devforever.fr\/oceanrangers\/wp-json\/wp\/v2\/tags?post=55"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}