githubEdit

Using mGEff for Visual Effects and Animations

mGEff Introduction

Animation realization principle

In general, animations fall into two types: Frame animations and properties animation. Frame animation refers to playing a series of disparate images prepared in advance to achieve an animation effect, such as GIF, image and so on; and attribute animation is achieved by continuously changing the various properties of the displayed object (such as size, position, angle, transparency, etc.) to achieve animation effects. This animation also has the concept of frame, but each frame is through real-time calculate and change the object's property value to generate an animation.

It is the property animation that is supported: the user can obtain the changed property value at each frame when the animation is performed by setting the start, end value, power curve, and animation duration of the property and other related parameters. The value changes the object's properties to make it sporty. To sum up, use mGEff the essence of the animation is to change the value of the object property from the starting value to the ending value within the specified time range.

Terminology

  • Animation: The underlying mechanism by which the mGEff component operates. It mainly provides the application with trajectory control mechanisms for animation objects, such as dynamic curves and time schedules. It also provides parallel and serial processing functions for multiple animation objects. Users can develop their own interface special effects based on mGEff's animation mechanism.

  • Special Effect: Based on the underlying animation mechanism, provides UX effects that can be used directly by upper-level applications, such as blinds, fades. mGEff currently provides only a single degree of freedom in the special effects, the future can achieve multiple degrees of freedom effects. The process of developing interface special effects directly based on the animation mechanism is more complicated. In order to support common user interface special effects, mGEff provides directly usable interface special effects based on the underlying animation mechanism. The use of special effects interfaces is convenient and simple, but has some limitations. For more complex special effects, applications still need to use animation mechanisms directly.

  • Effector: A software object or structure used to implement effects.

Framework

mGEff is a C Language-implemented lightweight animation framework that provides an efficient and flexible animation implementation. Since mGEff The design goal is to create an animation mechanism that is independent of the specific platform and graphics system, so it can be combined with MiniGUI,GTK+, and other GUI systems combined to develop GDI level, control level, and window level animations:

Although mGEff itself uses C Language development, but its design and implementation use some basic object-oriented thinking, such as simulation with struct Class, knowing this is very helpful for using it. Here is the mGEff class diagram:

As you can see from the figure above, mGEff provides EffAnimation, EffAnimationGroup, and EffEffector. For other components, the use of mGEff will be described in detail in the following section.

mGEff basics

mGEff API

Header files

you only need to include one header file:

mGEff Handle

  • mGEff handle is use to all mgeff api.

  • it is and void pointer, you can think it as an animation object pointer.

Initialize/Deinitialize

In use Before mGEff, it must be initialized; after use (usually at the end of the program), deinitialize to destroy the resources occupied by the framework.

The above two functions can be called in nested pairs, but it should be noted that mGEff Not thread-safe, so please do not use it in multiple threads at the same time.

Animation create/delete

create and delete animation.

  • target is the animation target, you can think it as an animation object, like an control, window, bitmap...

Animation callback

Animation has multiple callbacks, you can use relative callback to do yourself things.

  • animation finished.

  • animation state changed.

  • animation loop changed.

  • animation direction changed.

Animation start/end value

you should set animation start value, end value, it is used to set the relative value for animation run.

Animation run

Async run the animation in the default schedular asynchronous, attachs the animation to the default schedular and start the animation. The animation run immediately if schedular is already started, otherwise it will wait until the schedular started.

Sync run, Run the animation in the default schedular synchronous, attachsthe animation to the default schedular and start the animation. The animation run immediately and return until the animation finished.

Animation simple sample

After mGEff is initialized, you can start creating animations:

Through the simplest example program above, you can understand mGEff The basic use of the method: the first to create an animation and set the property value changes when the callback, set the property's start value and end value, the animation duration, and then run the animation in a synchronized manner, and finally destroy the animation. Here first introduce the animation creation function mGEffAnimationCreate, this function has four parameters:

  • The first parameter is the target to be animated. Since the above example is simple enough to produce no real animation, this parameter is passed NULL;

  • The second parameter is the function pointer to be called when the property changes. This function will be called in each frame of the animation, and will be introduced later;

  • The third parameter is the attribute ID, this value will be passed as a parameter to the property change callback function, used to distinguish the property to modify when multiple animations share the same property change callback function;

  • The fourth parameter is the type of the property value. This parameter determines the data type of the start and end values of the property, mGEff A set of typed enumerations is defined in the definition of the following:

Let's look at the property change callback function, which is called every frame of the animation. It contains four parameters:

  • handle - Call this function's animation handle, through this handle can access some information related to the animation in the function;

  • target - the target to be animated, it is calling mGEffAnimationCreate Specified when the animation is created, it can be a window, control handle, or something else;

  • id - The ID value of the property, also called mGEffAnimationCreate When specified, sometimes users want to share the same property change callback in multiple animations to control the change of multiple properties of the object. At this time, you can set different for each property. The ID value allows the user to determine the current changed property in the callback function. The current preset attribute ID is defined as follows:

  • value - the current value of the property, the start and end values of the property by mGEffAnimationSetStartValue/mGEffAnimationSetEndValue Two function settings, mentioned earlier mGEff The whole process of animation is to change the property from the starting value to the ending value, and this Value is the intermediate value (interpolation) during this change. In this example, the value is only printed to the standard output, so it does not produce a substantial animation effect, but the user can use the object properties to be animated to set this value (such as the example By changing the printf to a circle radius, you can get a realistic animation.

Power curve

The previous section introduced an example of creating a simple mGEff animation, but a callback from a property change Printing of onPropertyChanged function can be seen, property values from 1 to 10 The change is uniform, that is, a linear change. The actual animation effect of this change is relatively straightforward, so users often need to perform non-linear changes such as acceleration, deceleration, and oscillation to achieve more flexible and realistic animation effects. This requires the use of mGEff.

  • mGEffAnimationSetCurve: set animation curve, it have included more curves.

Another concept in the power curve is the power curve, through which you can control the speed of the animation. Still based on the examples in the previous section to demonstrate the usage of the power curve:

From the results of the execution of the example, it can be seen that there is a clear difference from the interpolation of the output of the previous section. The output shows a change in the acceleration law. It can be imagined that if Printf After the statement is replaced with the code that actually sets the object's properties (such as modifying the radius of the circle), its animation is accelerated.

mGEff there are dozens of preset power curves that can be used to implement different interpolation speeds to produce animated effects.

alt

mGEff support curve type

Animation Properties

Before starting this section, we must first carry out a noun convention: The above-mentioned "attribute animation" refers to the animation effect produced by continuously modifying an attribute of an animation object; this section is called "animation attribute" is Another meaning, it means passing

The attributes of the animated object created by mGEff can't be confused. Through functions.

You can set the properties of the animation itself. The prototype of the function and currently supported animation properties are enumerated as follows:

For example by mGEffAnimationSetProperty(animation, MGEFF_PROP_LOOPCOUNT, 5) You can change the number of animation animation loops to 5 times.

Animation Group

In practical applications, users often do not only want to perform an animation at the same time, but also need to associate multiple animations to be executed in parallel or in series to obtain more complicated animation effects. and so mGEff With the introduction of an animation group mechanism, the user can create a Parallel or Sequential group to achieve the requirements for performing a set of animations, as shown in the following example:

// TODO: Add a description of the sample program When creating an animation group, you can specify whether it is a parallel or serial animation. The feature of parallel animation is that when the animation group is executed, all the animations in the group are scheduled at the same time. The effect of the performance is that these animations are being performed at the same time; and the characteristics of the serial animation When the animation group is executed, the intra-group animations will be scheduled in sequence. The effect of the performance is that these animations are performed in sequential order. %BR% In addition, you can add an animation group to another group with the same scheduling rules.

Animation Context

An animation can set the context to carry more user information, and is often used to append data to the property change callback function. The specific method is very simple, as shown in the following code snippet:

This example will output: // TODO:

Effector effector

Effector create/delete

you should create an effector first, mgeff have defined some internal effector:

  • mGEffStr2Key get an has code for special effector name.

  • mGEffEffectorCreate/mGEffEffectorDelete create or delete an effector.

  • mGEffAnimationCreateWithEffector return an animation for the special effector.

Effector property

Type of effector set property callback function:

  • It is going to be called every frame.

Type of effector get property callback functio

  • It is going to be called every frame.

Type of effector get property callback function:

Effector source/sink

Effector have two important elements:

  • sink: sink is used for display, such as an MiniGUI DC.

  • source: effector source is the input element, such as an bitmap resource.

Effector callback

Include follow callback function:

  • Type of effector on draw callback function: It is going to be called every frame.

  • Type of effector begin draw callback function: It is going to be called when you create an animation with calling.

  • Type of effector end draw callback function: It is going to be called when the animation specified by animation is finished.

  • Type of effector init/finalize callback function: It is going to be called when you create/delete an effector with calling

Effector fill

Fills a DC with a predefined effector.

  • This function creates and run an animation whose SetProperty callback is a effector specified by type. The sources of the effector are specified by src1_dc and src2_dc respectively. The destination DC of the effector is specified by \a dst_dc. The duration of the animation is specified by duration.

Creating and Using Effects

Since mGEff The animation framework is provided, and the specific animation is delivered to the user. However, some animation effects are relatively common. If users are allowed to implement them each time, it is not conducive to code reuse and it is not guaranteed that the implementation is optimal. and so The concept of Effector was introduced in mGEff. Simply speaking, Effector The commonly used animation effects are implemented and packaged for direct use by the user. The following example shows how to create and execute a Effector:

alt

mGEff Effector suppport

How to use Effector

  • Create Effector.

Follow sample is MGEFF_MINOR_zip, you can use all above effector that has been support by mGEff.

mGEff use advanced

Animation execution

The animation supports synchronous and asynchronous two different execution modes. The synchronous execution function is called until the animation end function returns. In this process, the program will not be able to respond to the message; after the asynchronous execution function is called, the animation will be returned immediately and the animation will still be The schedule is executed until it is aborted or ended, and the program can respond to the processing message. The specific function prototype is as follows:

Synchronous and asynchronous animation function is very simple, there is only one animation handle parameters, create a good animation, its handle passed to any function will run in the corresponding execution. And mGEffAnimationWait Function is used to wait for an asynchronous animation to complete, the first parameter is the address of the current thread's form handle, the second parameter is the animation handle to wait, after the call function will wait until the animation is complete, but during the process can still be processed Other news. %BR% For asynchronous animation, you can pause or stop it during playback, and you can resume or restart the animation after pause and stop:

Custom Effector

MGEFF_EFFECTOROPS

MGEFF_EFFECTOROPS contains whole info of an effector, if you want to custom an effector, implement it, In the mGEff, it has defined some effector like the follow, when you custom an your own effector, you do not need to implement all the callback, but the ondraw callback must be include.

Simple alpha effector sample

An very easy alpha effector as follow:

Complex zoom effector sample

If you want to implement a complex effector, you can see the zoom effector in the mGEff:

  • init/finalize: allocate or free your own context var, like EffZoomCtxt is use to save zoom factor property.

  • begindraw: initialize the start and end value of animation, such as zoom start rectangle size and end rectangle size.

  • setproperty: setproperty is used to change zoom factor strategy, you can change it to implement your own strategy, just like zoom more quick or zoom accelerate.

  • getproperty: getproperty is used to return zoom factor for effector.

Custom Power Curves

The essence of the curve is a transformation function that controls the interpolation speed between 0 and 1.

  • MGEFF_MOTIONCURVE_CB: Type of the value calculating callback of the motion curve function, you can implement your own curve change.

An simple custom curve sample:


<< Integrating with GPU | Table of Contents | Using mGNCS4Touch >>

Last updated