{"id":503,"date":"2025-07-10T12:31:48","date_gmt":"2025-07-10T12:31:48","guid":{"rendered":"https:\/\/jmfourcaud.com\/animacionmm\/?p=503"},"modified":"2025-07-10T18:28:52","modified_gmt":"2025-07-10T18:28:52","slug":"exprsiones-wiggle-slider","status":"publish","type":"post","link":"https:\/\/jmfourcaud.com\/animacionmm\/exprsiones-wiggle-slider\/","title":{"rendered":"Expresiones: Wiggle + Slider"},"content":{"rendered":"

[et_pb_section fb_built=\u00bb1″ admin_label=\u00bbsection\u00bb _builder_version=\u00bb4.27.4″ global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][et_pb_row admin_label=\u00bbrow\u00bb _builder_version=\u00bb4.27.4″ background_size=\u00bbinitial\u00bb background_position=\u00bbtop_left\u00bb background_repeat=\u00bbrepeat\u00bb width=\u00bb100%\u00bb custom_padding=\u00bb||0px|||\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][et_pb_column type=\u00bb4_4″ _builder_version=\u00bb4.16″ custom_padding=\u00bb|||\u00bb global_colors_info=\u00bb{}\u00bb custom_padding__hover=\u00bb|||\u00bb theme_builder_area=\u00bbpost_content\u00bb][et_pb_text _builder_version=\u00bb4.27.4″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb]<\/p>\n

Expresiones<\/h3>\n

Las expresiones facilitan determinados aspectos de la animaci\u00f3n.<\/p>\n

En \u00e9sta secci\u00f3n vamos a ver una selecci\u00f3n de tutoriales elegidos para entender y aplicar de forma pr\u00e1ctica diferente tipo de expresiones desde un nivel b\u00e1sico a niveles m\u00e1s avanzados.<\/p>\n

[\/et_pb_text][et_pb_text _builder_version=\u00bb4.27.4″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb]<\/p>\n

Wiggle<\/h3>\n

La expresi\u00f3n Wiggle(A<\/span>,B<\/span>) <\/strong>permite un efecto de vibraci\u00f3n que puede aplicarse a cualquier tipo de par\u00e1metro animable.<\/p>\n

En los lugares de A<\/span><\/strong> y B<\/span><\/strong>, podemos poner valores num\u00e9ricos donde el primero modifica la frecuencia del evento. A <\/span><\/strong>es el m\u00e1ximo de veces que sucede en un segundo y B es el valor m\u00e1ximo que se aplica en un segundo. Esos valores var\u00edan a lo largo de la animaci\u00f3n.<\/p>\n

Ejemplo: Wiggle(5<\/span>,100<\/span>)<\/strong>: \u00e9sta expresi\u00f3n aplicada al par\u00e1metro de posici\u00f3n va a dar como resultado que el objeto se anime de 0 a 5<\/strong><\/span> veces en un segundo, entre 0 y 100<\/span><\/strong> pixels su posici\u00f3n.<\/p>\n

[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=\u00bb2_5,3_5″ use_custom_gutter=\u00bbon\u00bb _builder_version=\u00bb4.27.4″ _module_preset=\u00bbdefault\u00bb width=\u00bb100%\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][et_pb_column type=\u00bb2_5″ _builder_version=\u00bb4.27.4″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][et_pb_text _builder_version=\u00bb4.27.4″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb]<\/p>\n

Ahora si queremos un mayor control sobre \u00e9sta y otras expresiones, podemos utilizar los \u00abSliders\u00bb para animar esos par\u00e1metros y adem\u00e1s controlar sus valores m\u00e1ximo y m\u00ednimo.<\/p>\n

En este tutorial veremos c\u00f3mo controlar el efecto Wiggle<\/strong> (vibraci\u00f3n) con Sliders<\/strong> (controles deslizantes) + Keyframes (tutorial en ingl\u00e9s con subtitulado en castellano).<\/p>\n

 <\/p>\n

[\/et_pb_text][\/et_pb_column][et_pb_column type=\u00bb3_5″ _builder_version=\u00bb4.27.4″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][et_pb_text _builder_version=\u00bb4.27.4″ _module_preset=\u00bbdefault\u00bb width=\u00bb90%\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb]<\/p>\n