O projektowaniu Ruchu

strategie ruchu

kompedium do kawy i działania

ABOUT DESIGN MOTION

motion design strategies

THE COMPENDIUM FOR COFFEE AND ACTION

Info

Poniższe zasady ruchu służą, jako odniesienie, udogodnienie i inspiracja przy projektowaniu animacji, motion designu, gier i UX-u. Opracowane przez Wojciecha A. Hoffmanna, jako odniesienie do książki O projektowaniu ruchu – kompendium do kawy i działania.

These principles of motion can be used as a reference and inspiration for animation design, motion design, games and UX. They were developed by Wojciech A. Hoffmann, and are an interactive part of the project About motion design – the compendium for coffee and action.

Motion Design

ANCHOR POINT

Popatrzmy na Słońce. Środek obrotu naszego układu planetarnego znajduje się właśnie tam. Jednak jeszcze pięć wieków temu ludzkość była przekonana, że wszystko obraca się dookoła Ziemi. Jedną z największych rewolucji naukowych było przeniesienie przez Kopernika środka obrotu (anchor pointu) układu planetarnego z Ziemi na Słońce

Najpotężniejszym narzędziem w sztuce projektowania ruchu jest środek transformacji. Umiejscowienie go determinuje sposób, w jaki przekształca się obiekt.

Umieśćmy punkt zakotwiczenia na jego dolnej krawędzi. Powiększając go, odniesiemy wtedy wrażenie, że obiekt się powiększa. Jeżeli natomiast umieścimy go pośrodku, zauważymy, że rzecz przybliża się do nas. Jeszcze więcej przesunięcie środka transformacji zmienia podczas obrotu oraz wielu innych modyfikacji i efektów. Angielska nazwa punktu zakotwiczenia to anchor point. W programach do grafiki 3d środek transformacji jest pivotem lub miejscem zaczepienia osi. W świecie rzeczywistym punkt zakotwiczenia najczęściej lubi być w miejscu zwanym środkiem ciężkości.

Let's look at the Sun. The center of rotation of our planetary system is right there. However, until five centuries ago, humanity was convinced that everything revolved around the Earth. One of the greatest scientific revolutions was Copernicus' transfer of the center of rotation (anchor point) of our planetary system from the Earth to the Sun.

The most powerful tool in the art of motion design is the center of transformation. Its location determines how an object transforms.

Let's place the anchor point on the object's bottom edge. We will then get the impression that the object is growing. If, on the other hand, we place the anchor point in the middle, we will notice that the object is moving closer to us. Shifting the center of the transformation affects rotation and many other modifications and effects even more. In 3D graphics programs, the transformation center is the pivot or anchor point of an axis. In the real world, the anchor point usually tends to be at a place called the center of gravity.

ARCS

Łuki. Wszystko w przyrodzie rusza się po łukach. Linie proste są czymś sztucznym.

Nasze oko przystosowane jest do tego, by podążać za ruchem odbywającym się po krzywiznach, a mózg lepiej odczytuje taki ruch.

Ważne jest to zarówno przy animowaniu postaci człowieka, zwierząt, roślin, jaki i w przypadku obiektów graficznych. Jedynie typografia woli przemieszczać się po prostych.

Everything in nature moves in curves. Straight lines are artificial.

Our eyes are adapted to following movement along curves, and the brain is better at reading such movement.

This is important when animating human figures, animals, plants as well as graphic objects. Only typography prefers to move along straight lines.

EASES

Rozpędzanie i zwalnianie. Stosowanie easingów, czyli świadome kontrolowanie dynamiki poruszanych obiektów, jest esencją sztuki projektowania ruchu.

W strukturze odbioru rozpędzanie i zwalnianie dominuje nad stylistyką i projektem graficznym elementów.

Studenci często zauważają, że wystarczy dodać easingi do kiepskiego projektu graficznego, a całość postrzega się znacznie pozytywniej. Pamiętajmy jednak, że obiekt może ruszać się szybko, szybciej, bardzo szybko lub wolno, wolniej albo bardzo wolno. Ta decyzja zależy od nas.

The use of easing, or the deliberate control of the dynamics of moving objects, is the essence of the art of motion design.

In the structure of perception, acceleration and deceleration take precedence over the styling and graphic design of the elements.
Easing is the essence of motion design.

Students often remark that just adding easing to a poor graphic design is enough to significantly improve the perception of the design. However, let's keep in mind that an object can move fast, faster, very fast, or slow, slower, or very slow. How we design the movement is up to us.

MASS AND WEIGHT

Masa i waga. Jedną z najciekawszych rzeczy w motion designie jest możliwość nadania tym samym obiektom różnych cech poprzez zróżnicowanie ich animacji. Okrąg może być lekką elastyczną piłeczką, a innym razem ciężką metalową kulką, która w ogóle się nie odbija.

Masa i waga są jedynie właściwościami ruchu. Im przedmiot jest mniej podatny na poruszenie, tym zdaje się cięższy, a przy zatrzymaniu generuje wrażenie większej energii.

Masę i wagę przedmiotów odczytujemy najczęściej poprzez obserwowanie ich ruchu. Inaczej zachowuje się wędkarz, wyciągając małą rybkę, a zupełnie inaczej, gdy próbuje wyciągnąć z wody wielki ciężki okaz.

One of the most interesting things about motion design is the ability to give identical objects different characteristics just by varying their animation. The same circle can appear to be a light rubber ball or a heavy metal one that doesn't bounce at all.

Mass and weight are only properties of motion. The more difficult it seems to move an object, the heavier it seems, and the greater the impression of energy when it stops.

We typically discern the mass and weight of objects by observing their motion. Both the angle and their rod behave quite differently when reeling in a small fish than when they're trying to land a leviathan.

ANTICIPATION

Uprzedzanie. To jedna ze strategii, która pozwala bardziej ożywić animację. Uprzedzanie dodaje wewnętrznej energii obiektowi, dzięki czemu mamy wrażenie, jakby posiadał on świadomość i wiedział, jak najlepiej może przygotować się do ruchu.

Poobserwujemy, jak w naturze większość ruchów jest poprzedzona innym, po którym poznajemy, że zaraz coś się stanie, zmieni miejsce lub dynamikę.

Obserwowanie antycypacji ruchu pozwala nam przewidzieć, co się zaraz stanie, i odczuwać satysfakcję z tego, że nasz mózg dobrze odgadł kierunek zapowiadanego ruchu.

This is a strategy that aims to make movement more lively. Foreshadowing movement adds internal energy and makes us feel as if the object has some awareness about how to best prepare for the movement.

Anticipation is foreshadowing. We can observe in nature how most movements are preceded by another, by which we already recognize that something is about to move, fall or change dynamics.

Observing the anticipation of a movement allows us to predict what is about to happen and feel the satisfaction of knowing that our brain has correctly guessed the direction of the foretold movement.

SQUASH AND STRETCH

Zgniatanie i rozciąganie. Pozwala odczytać, z jakiego materiału jest animowana rzecz albo jaki ma charakter czy osobowość. Inaczej zgniata się piłka wypełniona wodą, a inaczej powietrzem.

Odkształcenie nie jest informacją o masie i wadze, ale o wypełnieniu.

Sygnalizuje, czy obiekt wewnątrz jest pusty, czy wypełniony płynem, a może czymś twardym. Dynamiczna deformacja komunikuje o wewnętrznych właściwościach obiektu.

It allows us to identify what material the animated thing is made of, or what character or personality it has. A ball filled with water and a ball filled with air are squashed differently.

Deformation does not convey information about mass and weight, but about filling.

Dynamic deformation communicates the internal character of an object. It signals whether the object is hollow or maybe filled with liquid or something solid.

SECONDARY ANIMATION

Dodatkowa akcja. Czasami, gdy w danej chwili nasz ruch wydaje się nudny lub przydługawy, można zastosować strategię drugiej animacji. Osiągamy to poprzez dodanie na przykład zmiany pozycji, rotację lub zmianę skali albo deformację.

Akcja drugoplanowa nie powinna dominować, aby nie odwracać uwagi od właściwego ruchu, tylko pomóc skupiać na nim wzrok.

Osiągamy wtedy efekt ożywienia, tak by można opowiedzieć więcej o obiekcie lub postaci.

Sometimes when our movement seems dull or drawn-out at a given moment, the secondary animation strategy can be used. This is accomplished by , for example, changing the object's position or scale, adding rotations, or introducing deformations.

The secondary action should not dominate so as to help the viewer focus on the main movement and not distract from it.

We then achieve the effect of bringing the object to life so that we can also tell more about the object or character.

EXAGGERATION

Wyolbrzymianie. Przesadny ruch lub karykatura ruchu. Idealne naśladowanie rzeczywistej dynamiki może okazać się nieczytelne. Czasami warto pewne jego momenty wyolbrzymić i wzmocnić, żeby poprawnie odczytać emocje postaci lub by całość nie była zbyt nudna.

Wyolbrzymienie to nie jest skrajność i maksymalna deformacja obiektu, lecz poszukiwanie równowagi pomiędzy czytelnością ruchu a zakresem deformacji, w której ten obiekt jeszcze atrakcyjnie wygląda.

Jest to skuteczna strategia zarówno w animowaniu obiektów, jak i postaci.

Exaggerated movement or caricature of movement. A perfect imitation of real dynamics can be indecipherable or boring. Sometimes it is useful to exaggerate and amplify certain moments of a movement in order to correctly convey the emotions of the character or to make the whole less boring.

Exaggeration doesn't aim at extreme or maximum deformation of an object, but it requires searching for a balance between the clarity of movement and the extent of deformation that still leaves the object looking attractive.

This is an effective strategy in both object and character animation.

FOLLOW THROUGH

Podążania za akcją. Podążanie za akcją dotyczy elementów, które przesuwają się za postacią. Nawet gdy ta się zatrzyma, elementy dalej są w ruchu.

To strategia dopowiadającą ruch poprzez posługiwanie się grawitacją, dynamiką czy bezwładnością otaczających elementów.

Tymi elementami mogą być włosy, luźne ubrania, części ciała lub elementy graficzne, jak części znaku graficznego, symbolu lub loga. Również w motion designie, animując obiekty lub typografię, ta strategia jest bardzo pomocna.

Follow through refers to a character's parts moving with a delay. Even when the character stops, their elements have inertia.

This strategy makes movement more realistic by using gravity, wind, dynamics or the inertia of surrounding elements.

These elements can be hair, clothing, body parts or graphic elements, such as parts of a graphic sign, symbol or logo. It is most noticeable when a character's looser clothing follows them, or when the character's hair is long. However, this strategy can also be very helpful in motion design while animating objects or typography.

CODING

Kodowanie. Możemy nadać ruch poprzez dodawanie klatek kluczowych lub rysowanie następnych faz ramek ruchu. Również poprzez kodowanie możemy wprawiać obiekty graficzne i całe postacie w ruch. W wielu programach dostępne są skrypty lub komendy, które po wpisaniu wspierają nas w animowaniu. Narzędzie kodowanie jest bardzo elastyczne. Posiada nieograniczone możliwości.

Programowanie ruchu skryptami jest równie twórczą czynnością, co animacja rysunkowa lub animacja na klatkach kluczowych. Dobieranie właściwych wartości, liczb, szukanie najlepszych zależności i wyrażeń jest procesem wymagającym sporego wyczucia i intuicji twórczej czy doświadczenia.

Kodując, tworzymy dwuwarstwowo. Na jednej warstwie jest wizualny ruch, a w drugiej elementem kreatywnym jest pisanie kodu czy wyrażeń.

We can create motion using keyframes or drawing the next phases of motion frames. We can also set graphic objects and whole characters into motion through coding. In many programs, there are scripts or expressions available to help us animate. Coding is a very flexible tool with unlimited possibilities.

Programming movement with scripts is as creative an activity as drawing animation or keyframe animation. Choosing the right values and looking for the best relations and expressions is a process that requires a lot of creative intuition and experience.

While coding we are creative in two dimensions: the visual movement dimension and that of writing code and expressions.

Animation

SOLID DRAWING

Poprawny rysunek. Rysunek, który uwzględnia perspektywę, proporcje albo też logikę geometryczną fikcyjnego świata. Ważne, by w sposób konsekwentny zawierał cechy otaczającego go świata.

Poprawny rysunek to niekoniecznie studium elementu, może to być też szkic, jednak istotne by był przemyślany, bez cech chaotyczności i przypadkowości.

Coraz częściej rysunek dopełnia możliwości techniczne riggowania postaci i zauważamy go jako shader lub tekstura w 3d.

In solid drawing, perspective, proportion, and the geometric logic of a fictional world are taken into account. It is important that it consistently includes features of the surrounding world.

Solid drawing is not necessarily a study of an object or scene. It can also be a sketch; however, it is important that it is well planned and avoids chaotic and random features.

Drawing increasingly complements character rigging and is used as a shader or texture in 3D.

STAGING

Inscenizacja. Reżyseria. Wykreowanie sytuacji, w której nasza idea będzie czytelna. Możemy umieścić tak bohatera, by było widoczne to, co jest w danym ujęciu dla nas istotne. W przybliżeniu widać ekspresję twarzy, w planie ogólnym cały nawet bardzo szybki ruch postaci.

W przypadku motion designu i animowania elementów graficznych zastanówmy się, czy na pewno jest widoczny i czytelny nasz komunikat, tekst albo znak.

Projektując typografię w ruchu, ważne, by była ona tak skomponowana i wyeksponowana, by można było ją komfortowo przeczytać w zaplanowanym czasie i czy krój oraz wielkość czcionki są odpowiednie.

Staging means creating a situation in which our idea will be clear. We place the character in a way that makes important parts of the scene visible. A close-up allows facial expressions to be seen, while the general plan will reveal all the character's movements.

When animating graphic elements in a motion design, one should make sure that the message, text or character is clearly visible and legible.

When designing typography in motion, it is important that it is composed and displayed both at the right time and for long enough in a legible font and size so that it can be read comfortably.

APPEEL

Urok. A może wręcz charyzma i to zarówno postaci, jak i ruchomego elementu.
Załóżmy, że postać lub grafikę tworzy inny projektant.

My skupiamy się wtedy na przemyśleniu ruchu, który oczarowuje widza.

Kojarzymy zjawiskowo poruszającej się osoby. Chodzącej, siedzącej w taki sposób, że roztacza wokół siebie aurę. Właśnie o to tutaj chodzi. Poruszajmy grafiką tak, by ruch oddawał ducha postaci lub obiektu.

Appeal refers to a certain charm or charisma of both a character and elements in motion. Let's assume that a character or graphic has been created by another designer.

In our case, it would be most appropriate to think of movement that charms the viewer.

We can think of people who move with extraordinary grace, walking or sitting in such a way that they project an aura around them. That is precisely the point here. Let's move graphics in a way that captures the spirit.

INBEETWENING

Animowanie faz kluczowych. Jedno z najbardziej wspierających narzędzi przy bardzo precyzyjnym projektowaniu z góry określonego ruchu, szczególnie postaci.

Stosując strategię inbetweenów, można w sposób przystępny animować bardzo skomplikowane ruchy.

Stosując strategię inbetweenów, można w sposób przystępny animować bardzo skomplikowane ruchy.

One of the most helpful tools when designing precise predefined movements, especially for characters.

Inbetweening allows for easy animation of very complex movements thanks to using key frames.

Key-frame animation can be used in traditional drawing animation as well as motion design or advanced VFX.

SPACING

Przestój. Zazwyczaj motion design posiada tę samą liczbę faz, co liczba klatek na sekundę. Na przykład, gdy w projekcie ustawimy 30 klatek na sekundę, to domyślnie program generuje nam 30 pozycji ruchu na sekundę.

Istnieje zasada manipulowania liczbą klatek, aby uzyskać ruch bardziej lub mniej płynny.

Warto posiadać świadomość, że nie do każdego projektu pasuje ruch skrajnie wysoki i płynny z liczbą 120 lub 60 faz na sekundę. Czasami ruch 4 faz, mocno przeskakujący, w lepszy sposób dopełni nasz projekt.

Motion design usually has the same number of frames as the number of frames per second. For example, when we set 30 frames per second in the design, the program generates 30 frames per second for us by default.

There is a rule of thumb for manipulating the number of frames to get a more or less smooth motion.

It is worth keeping in mind that having 60 or 120 frames per second doesn't necessarily suit every project. Sometimes the movement created by 4 jarring frames will better complement our project.

POSE TO POSE

Animowanie progresywne. Rysowanie następnej fazy po kolejnej i tak dalej jest najbardziej intuicyjnym sposobem tworzenia.

Zapewnia to nieograniczoną swobodę twórczą z polem nieujarzmionej improwizacji.

Animowanie progresywne wykorzystywane jest w technikach animacji bezpośrednio rejestrowanej aparatem fotograficznym, gdzie nie można stworzyć klatek kluczowych. Rozwijanie animacji w ten sposób obecne jest w wycinankach, technikach sypkich czy animacji lalkowej, pikselacji oraz stop motion.

Drawing one frame after another is the most intuitive way to create.

It provides unlimited creative freedom with room for unbridled improvisation.

Pose to pose is used in direct camera capture animation techniques where keyframes cannot be used. Developing animation in this way is present in paper cut-outs, sand and puppet animation, pixilation and stop motion.

SMEARS

Rozmazanie. Zarówno oko, jak i kamera posiadają ograniczenia i nie zawsze można zarejestrować nieporuszony obraz.

Rozmazanie jest efektem podkreślenia ruchu.

Ale też strategią omijającą pewne ograniczenia, gdy ruch nie wygląda wystarczająco płynnie albo gdy liczba klatek na sekundę animacji jest niska. Roztarte na ekranie formy czy postacie mają też własny urok, czasami wyglądają wręcz bardziej naturalnie i zjawiskowo.

Both the eye and the camera have limitations and it is not always possible to capture a blur-free image.

Not only does smearing emphasize motion, but it also allows us to smooth choppy motion or surmount limitations imposed by low frame rates.

Blurred forms or characters on the screen also have their own charm, sometimes even looking more natural and phenomenal.

CONTINUATION

Kontynuacja ruchu. Oko lubi za czymś podążać. Strategia ta dotyczy tak zaprojektowanego ruchu, by w momencie, kiedy jeden obiekt się zatrzymuje, równocześnie inny przejmował jego energię czy dynamikę.

Stosując tę zasadę, utrzymujemy nieustanne uwagę widza, a także poczucie naturalnego przechodzenia pomiędzy postaciami, obiektami graficznymi.

A w przypadku projektowania napisów odczucie równomiernego bardziej relaksującego wejścia w film i czytelność tekstu.

The eye is drawn to following something. This strategy involves designing movement in such a way that when one object stops, another object takes over its energy or dynamics.

Using this concept, we maintain the viewer's uninterrupted attention, as well as a sense of natural transition between characters and graphic objects.

In the case of subtitle design, continuation provides a more relaxed film watching experience and improves the readability of the text.

ORDERLY

Porządkowanie ruchu. Czasami ruch potrafi być chaotyczny. Motion design, szczególnie ten z napisami czy w sztuce projektowania czołówek, porusza się głównie w oparciu o idealnie poziome i pionowe ruchy.

Jednak często w motion designie chcemy uzyskać bardziej dystyngowaną atmosferę i warto wtedy zastosować zasadę porządkowania ruchu.

Porządkowanie ruchu jest bliskie zasadzie less is more. W naszym przypadku prostsze, mniej wyszukane ruchy zapewniają większą czytelność komunikatu lub tekstu.

Sometimes motion can be chaotic. Motion design, particularly that dealing with text or title animations, mainly employs horizontal and vertical movements.

However, often in motion design we want to achieve a more distinguished atmosphere, and it is then useful to apply the principle of motion ordering.

Motion ordering is close to the principle of less is more. In our case, simpler, less elaborate movements provide greater readability of the message or text.

RHYTM

Rytm. Oko i mózg lubią, jak animacja wizualnie napędzana jest miarowo przez własne tętno. Taka powtarzalna miarowość staje się wizualnym rytmem.

Wizualny rytm zsynchronizowany z muzyką daje twórcy ogromną moc wpływania na emocje i odbiór widza.

Znamy z muzyki wiele rytmów i te rozwiązania możemy bezpośrednio zastosować w projektowaniu. Czy to tylko poprzez synchronizowany montaż, czy rytm wewnątrz kadru, poprzez tempo ruchu obiektów, synchronizowany obrót, skalowanie lub przez choreografię postaci.

The eye and brain like to see when animation is steadily driven by its own pulse. Such repetitive regularity becomes a visual rhythm.

Synchronizing visual rhythm with music gives the creator great power to influence the viewer's emotions and perception.

Music provides many rhythms which can be applied directly in motion design. This may be accomplished by synchronized editing, rhythm within the shot, pace of objects' movement, synchronized rotation, scaling or through character choreography.

Game

COLLISION AND INTERACTION

Kolizja i interakcja. Gdy dwa obiekty oddziałują na siebie, zaczyna tworzyć się gra. Wizualna gra w postaci filmu czy też gra, którą możemy sterować przy użyciu padu, kontrolera lub klawiatury.

Kolizja i interakcja są strategią tworzącą historię w oparciu o interakcję, którą łatwo zauważyć lub zapamiętać

Obiekty niekoniecznie muszą się zetknąć, by zaszła interakcja. Czasami jeden z końca ekranu może oddziaływać na drugi. W wyniku kolizji inny obiekt może się rozpaść lub zmienić.

When two objects interact with each other a game begins to take shape. A visual game in the form of a movie or a game that we can control with a pad, controller or keyboard.

Collision and interaction is a strategy that creates a story based on interactions that can be seen and remembered easily.

Objects don't necessarily have to touch each other for an interaction to occur. Sometimes an object one end of the screen can interact with one at the other end. As a result of a collision, other objects may fall apart or transform.

UX

OFFSET AND DELAY

Przesunięcie i opóźnienie. Rozsuwanie elementów względem siebie na ekranie jest zasadą offsetu, a przesunięcie względem siebie w czasie opóźnieniem.

Duplikując wielokrotnie warstwę i stosując w niej przesunięcie, możemy uzyskać ciekawe efekty graficzne lub kompozycyjne. Natomiast kopiując wielokrotnie animowane ruchome obiekty i rozsuwając je w czasie, możemy uzyskać efekt zróżnicowania ruchu.

Każdy z elementów wygląda wtedy jak niezależny obiekt, jeśli jeszcze dołożymy do tego zmianę skali lub koloru.

The growing distance between elements on the screen forms the basis of the offset principle, while the displacement relative to each other over time is delay.

By repeatedly duplicating a layer and applying offset to it, we can achieve interesting graphic or compositional effects. On the other hand, by copying animated moving objects repeatedly and staggering their timing, we can get a varying motion effect.

If we further add a change of scale or color each element then looks like an independent object.

PARENTING

Strategia rodzica. Jeden wybrany element nadrzędny jak rodzic przekazuje swoje właściwości dzieciom. Może to być zmiana kierunku, pozycji, powiększanie, obrót, zmiana kolorów czy innego efektu.

Rodzic może być niewidoczny czy być najmniejszym z elementów.

Strategia ta przyspiesza projektowanie i ułatwia zarządzanie całymi grupami obiektów.

A selected parent-like element passes its properties to its children. It can be a change of direction, position, zoom, rotation, colors or other effects.

The parent can be invisible or the smallest of the elements.

This strategy speeds up design and makes it easier to manage entire groups of objects.

TRANSFORMATION

Transformacja. Płynne przekształcanie jednego kształtu obiektu w drugi.

Transformacje jest jedynie wrażeniem i przy szybkich ruchach często wystarczy oku zasugerować kierunek lub rodzaj zmiany, a mózg sam dopowie obraz całej transformacji.

Transformowanie to coś, co trudno uchwycić w statycznym projekcie graficznym, dlatego projektując go, warto narysować rodzaj i kierunek zmian poprzez kilka obrazów lub w formie mikrostoryboardu.

Smooth transformation of the shape of an object into another.

Transformation is just an impression, and if we use quick movements the mere suggestion of a direction or type of change is enough for the brain to perform the entire transformation of the image by itself.

Transformation is difficult to capture in a static graphic design, so when designing it, it is a good idea to draw the type and direction of changes through several images or in the form of a micro-storyboard.

VALUE CHANGE

Zmiana wartości. Strategia bardzo przydatna przy pokazywaniu danych i grafik informacyjnych, które w przypadku motion designu mogą zawierać dynamiczne zmiany.

Zmiana wartości jest strategią obecną przy projektowaniu systemu ruchomej grafiki na potrzeby wydarzeń na żywo, szczególnie sportowych.

Jest to jeden z bardziej rozwijających się obszarów, gdzie pozyskiwane dane z zewnętrznego źródła na bieżąco są wizualizowane na ekranie.

This strategy is very useful for displaying data and information graphics, which in the case of motion design can incorporate dynamic changes.

Value change is useful when designing motion graphics systems for live events, especially sports.

This is one of the fastest growing areas in which data acquired from an external source is visualized on screen in real time.

MASKING

Maskowanie. Przesłanianie niektórych elementów i ich ponowne odkrywanie. Tworzenie przestrzeni, które mogą się nakładać lub uzupełniać.

Maskowanie ma ogromny potencjał zastosowań szczególnie w momentach różnego rodzaju nakładania poruszających się elementów.

Wycinanie ruchomych elementów pozwala nam uzyskać zupełnie nowe style wizualne i wartości poprzez jedną decyzję, jaki kształt ma mieć maska.

Masking involves obscuring certain elements and revealing them again. Masks can be used to create spaces that overlap or complement each other.

Masking is very useful especially at moments when moving elements overlap.

Cutting out moving elements allows us to achieve entirely new visual styles and values simply by deciding on the shape of the mask.

OVERLAY

Nakładanie. Mieszanie wartości dwóch warstw i obiektów w momencie nałożenia. Istnieją dziesiątki sposobów nakładania, mogą one być inspirowane sposobem mieszania się barw, kontrastem, nasyceniem kolorów itp.

Poprzez nakładanie uzyskuje się nowe zaskakujące wizualnie obrazy, szczególnie w ruchu.

Nałożenie bardzo przydatne jest w przypadku tworzenia zaawansowanego compostingu, aby odzwierciedlić najróżniejsze zjawiska zachodzące wokół nas.

Overlay refers to blending the values of two layers and objects when superimposed. There are dozens of overlaying modes, and they can be inspired by contrast, color saturation or the way colors blend, etc.

By overlaying, new visually surprising images are created, especially in motion.

It is very useful for creating advanced composites to reflect various phenomena happening around us.

CLONING

Klonowanie. Strategia w ruchu pokazująca proces duplikowania przedmiotów z naciskiem na ukazanie procesu podziału. Uzyskujemy w ten sposób dwa identyczne obrazy.

Klonowanie może też dotyczyć ścieżki ruchu.

Dwa obiekty lub dwie postacie mogą posiadać ten sam ruch. Możemy sobie wyobrazić sytuację, w której bierzemy ruch myszy i podkładamy je pod ciało słonia. Kilka obiektów, postaci czy zwierząt może posiadać ten sam ruch, nawet najbardziej przypadkowy.

A strategy of designing motion that shows the process of duplicating objects that emphasizes depicting the division process to obtain two identical images.

Cloning can also refer to a path of movement.

Two objects or two characters can have the same movement. We can imagine a situation in which a mouse's movement is superimposed on to an elephant. Several objects, characters or animals can have the same motion, even the most random.

OBSCURATION

Zaciemnianie. Możemy też zaciemnić ruchu, aż stanie się on niewidoczny, na przykład poprzez skrajne rozmazanie, czyli rozblurowanie obiektu, albo umieszczenie go tak daleko, że detale ruchu lub cały ruch pozostają niewidoczne.

Zaciemnienie ukrywa pewne właściwości ruchu i obrazu.

Jeśli bardzo pomniejszymy lekko drżący obiekt, to w dużym pomniejszeniu lub z daleka będzie wydawał nam się statyczny.

Movement can also be made invisible by obscuring it through, for example, extreme blurring, which can be accomplished by blurring the object or placing it so far away that the entire motion or its details become imperceptible.

Obscuration hides certain properties of the movement and the image.

If an object is lightly trembling, by making it small or placing it far away, we cause it to seem static.

PARALLAX

Paralaksa. W animacji możemy uzyskiwać też pozorne ruchy, gdy wszystkie elementy graficzne czy postaci cały czas są statyczne, a jedynie kamera się porusza.

Obserwując obiekt z różnych punktów, postrzegamy go inaczej.

Uzyskujemy wtedy analogiczny efekt, jak patrząc przez okno podczas jazdy pociągiem, gdy nam się wydaje, że obiekty przy torach poruszają się szybciej niż te, które są dalej.

Even when all the graphic elements and characters are static, movement can be achieved by moving the camera.

By observing an object from different points, we perceive it differently.

The effect achieved is analogous to that experienced while looking out the window of a moving train where it seems to us that objects near the tracks are moving faster than those further away.

DIMENSIONALITY

Wielowymiarowość. Obiekty w ruchu ukazują w łatwy sposób swoją wielowymiarowość. Podstawowe wymiary to wysokość i szerokość oraz, w przypadku projektowania w 3d, dodatkowa trzecia oś głębokości w systemie x, y i z. Wymiarem jest również czas.

Jednak każdy z wymiarów głębi jest na ekranie jedynie iluzją przestrzeni, bo monitor zawsze będzie posiadać jedynie wysokość i szerokość.

Istnieje technika flat 3d, która ukazuje w przestrzeni 3d płaskie obiekty jakby wycięte z kartki albo iluzje ruchu, którym ulega nasze oko. Pełna wielowymiarowość pomaga nam w zrozumieć przestrzeń dookoła nas.

Their dimensionality can easily be seen when objects are in motion. The basic dimensions are height and width and, when designing in 3D, an additional third axis of depth in the x, y and z system. Time is also a dimension.

However, depth is only an illusion of space on the screen because the monitor only has height and width.

There is a flat 3D technique, which shows flat objects in 3D space as if cut from a sheet of paper, or illusions of motion that our eye undergoes. Dimensionality helps us fully understand the space around us.

DOLLY AND ZOOM

Manipulowanie perspektywą. Zmiana ogniskowej obiektywu z równoczesną zmianą odległości do filmowanego obiektu na pierwszym planie. W efekcie następuje zmiana perspektywy tła, bez zmiany wielkości obiektu na pierwszym planie.

Dolly and zoom rozszerza nasze doznania poza możliwości, jakie dostarcza nam naturalnie nasz organ wzroku.

W przypadku doświadczeń użytkownika w szerszym kontekście dotyczy to manipulowania perspektywą odbioru w celu uzyskania różnorodnych efektów na podstawie tych samych elementów.

Dolly and zoom involves changing the focal length of the lens while also changing the distance to the filmed object in the foreground. The result is a change in the perspective of the background without changing the size of the object in the foreground.

Dolly and zoom extends our experience beyond the capabilities naturally provided by our eyesight.

For the user experience more generally, perceptive manipulation results in creating a variety of impressions while using the same elements.

Opracowanie uwzględnia częściowo istniejące zasady ruchu, takie jak 12 zasad animacji Disneya, 10 zasad motion designu stworzonych przez Jorge Rolando Canedo Estradę i zasady UX-u w ruchu Issary Willenskomera.

The study takes into account, in part, existing motion principles such as Disney's 12 principles of animation, the 10 principles of motion design created by Jorge R. Canedo Estrada and Issara Willenskomer's principles of UX in motion.

Cookies

Strona wykorzystuje pliki cookies w celach statystycznych i personalizacyjnych. Kontynuując przeglądanie strony, wyrażasz zgodę na używanie plików cookies.

The site uses cookies for statistical and personalization functions. By continuing to view the site, you agree to use the cookies.

AkceptujęAccept

CTG NAME

TITLE