![]() See this blog post for how to name and organize layers: So clear layer naming can also help iterate through the design draft. (Importing the Principle without checking and sorting, it will cause the layers to fly around.)Ģ) Both Flinto and Principle support the sketch source file update, which is to overwrite the original layer and add a new layer. Clear layer naming helps to correlate different states of the same element better and faster, and avoid errors. One of the steps necessary before doing the animation is to organize the sketches and layers of the sketch, and consider them better when drawing the prototype.ġ) Principle's tween motion is layer-based. Therefore, to achieve a similar effect, you need to create a new state, and the operating cost is much higher*. Set the drive component to scroll / paging / dragging, select the corresponding coordinates through Drivers, and add a keyframe for the elements and parameters that need to be changed at that coordinate value.įlinto can achieve the same effect by using the scroll gesture in the behavior, but it still needs to be managed by the specific state. Here Principle is still the concept of the timeline, except that the value on the axis is not time, but the X or Y coordinate when sliding. If the motion of a certain component/group of components is driven by the x/y parameter of the other component, the Drivers function in the Principle can be used In addition, Flinto's behavior editor also has: 1) scrolling, its function is similar to Principle's Scroll begins/released/ends 2) button press (used to define the button's default and pressed state) button hover (using To define the default and hover state of the button) There are more Drag begins and Drag ends in the Principle, corresponding to the "Drag and Drop" operation in the Human Interface Guide.įlinto has two more presses and 3D Touch, and 3D Touch supports further setting of the sensing intensity. In contrast, the default effect of the Principle is more natural and smooth, which is believed by many designers. In comparison, Principle adjusts the motion curve to a slightly higher cost, unlike the start and stop time, it can be adjusted in batches Flinto adjusts the start and stop time cost slightly higher, and needs to adjust the corresponding events one by one Īlthough both applications automatically create tween animations between the start and end states, the default tween animations have different effects. ![]() The motion curve is adjusted by three parameters of tension, friction and speed (the parameters of the motion curve can be one) Key copy) The start and stop time of the motion is adjusted by delay and duration. The dynamic parameters of each interaction event in Flinto are modified after the event is selected. In the Principle, the start and stop times of different elements can be adjusted through the time axis, and the motion details can be adjusted through the motion curve Principle: Unified panel management for easier adjustmentįlinto: A single editor, it is difficult to grasp the wholeĭefault parameter effect: Principle>Flinto *Ĭontrol interaction: Interactive controls created with Component or Behavior can be reused by copying * The Flinto transition field is independently stored in the transition editor and contains multiple The default transition effect, you can either call the preset effect or the default effect when creating a new transition. Currently, there is no option to provide bulk copy. Interface transition: The motion setting of the interface transition in the Principle is stored in the target artboard. The behavior of Behavior and Component is actually similar, and is a concatenation of different states in the editor, which is not described in detail here. The interface transition is implemented by Transition (as shown in the animation above), and the control interaction is implemented by the Behavior. In addition, the functionality of the Component is used to create control interactions The interface transition effect can be achieved directly by defining the initial and final state of each element in the start and target artboards (as in the animation above) Principle- Artboard +Components for different states, only Components support multiplexing įlinto-Transition+Behavior, high reusability The specific implementation of the interface transition effect and control interaction:
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |