Cómo hacer un diseño de movimiento en línea: cómo usar el pensamiento ppt para crear una página de movimiento h5 móvil
¿Cómo utilizar AE para crear animaciones 3D para el diseño de UI?
1.?
¿Proceso de diseño?
¿AfterEffects?
1. Crea efectos de transición en una composición
2. Crea efectos de presentación en otra composición
3. Exporta a Photoshop
4. imagen
¿Una imagen de fondo?
¿Una plantilla de efecto de perspectiva?
1. ¿Construcción básica?
¿Crear síntesis de efecto de transición?
Abrir AE, Composición>Nueva composición (Cmd+N), tamaño 640*1136, número de fotograma 29, duración 6s
Importar imagen de fondo, colocar la imagen en la composición 1, cambiar el tamaño de la imagen de fondo para ajustarse al lienzo
Crea 3 cuadros azules (usando capas de formas) que caerán desde la parte superior de la pantalla hasta la parte inferior de la pantalla, con anchos de 213, 214 y 213 píxeles. El ancho del cuadro encima de los tres cuadros es 640 px y se ingresa el texto correspondiente.
Usa un bolígrafo para delinear las nubes y 6 círculos huecos de copos de nieve
¿Paso 5?
Guárdalo para hacer algunas animaciones simples, o incluso ninguna animación. Todo estará bien. Porque la interfaz de usuario no tiene altos requisitos para efectos dinámicos. También juegas a menudo con teléfonos móviles y computadoras. Si miras las animaciones en páginas web y teléfonos móviles, son todas cosas muy básicas. Con ae, puedes aprender más del 90% de los efectos de movimiento en 3 días como máximo. Simplemente significa que puede llevar más tiempo dominarlo. Cómo crear animaciones de UI simples con AE
En Dribbble y Behance, es posible que hayas visto muchos trabajos de UI que usan Gif para expresar conceptos de diseño. Mucha gente quiere saber cómo producir y cómo expresar mejor y más eficientemente sus ideas. Obviamente, la presentación dinámica es más vívida que la presentación estática. En este artículo, le enseñaré cómo "dinamizar" su diseño.
Las ventajas de un GIF dinámico que muestra trabajos de UI son:
1. Mostrar el flujo de trabajo real
2. Utilice transiciones para mostrar los efectos de los diferentes estados de la interfaz. aplicación
3. Conveniente para compartir en red.
Herramientas
AfterEffectsCS6oCC
PhotoshopCS6oCC
Proceso de diseño
AfterEffects
1. Crea efectos de transición en una composición
2. Crea efectos de presentación en otra composición
3 Exportar
Photoshop
4 .Optimizar GIF. imágenes
Materiales
Una imagen de fondo de Londres
Una plantilla de efecto de perspectiva de teléfono móvil
1. Construcción básica
p>Crear composición de efecto de transición
Paso 1
Abrir AE, composición>Nueva composición (Cmd+N), el tamaño es 640*1136, el número de fotograma es 29, la duración es 6s
Paso 2.
Importe la imagen de fondo de Londres, suelte la imagen en la composición 1, cambie el tamaño de la imagen de fondo para que se ajuste al lienzo.
Paso 3 p>
Cree 3 cuadros azules (usando capas de formas). Estos cuadros azules caerán desde la parte superior de la pantalla hasta la parte inferior de la pantalla, con anchos de 213, 214 y 213 px. El ancho del cuadro encima de los tres cuadros es 640 px y se ingresa el texto correspondiente.
Paso 4
Usa un bolígrafo para delinear las nubes y 6 círculos huecos de copos de nieve (perdón por el contorno acuoso)
Paso 5
Guardar
Mostrar composición
Paso 1
Crear composición 2
Dimensión 1280x720, número de fotograma 29, tiempo 6s
Paso 2. Importa el fondo del iPhone y ajusta el tamaño.
Paso 3
Arrastre la composición 1 a la composición 2, luego la composición 2 debería verse así: (p.d., agregué una capa de fondo)
Paso 4.
Selecciona Composición 1, ve a Efecto>Distorsionar>Posicionamiento de esquinas y alinea las cuatro esquinas de la Composición 1 con las cuatro esquinas de la pantalla en la plantilla.
------------------------------------------- -- ----Lo anterior es la parte de construcción básica------------------------------- ---- --------------------------
2. Producción de efectos de movimiento
Ahora , vamos a desglosarlo Aquí está la animación:
1. Los tres cuadros azules se alargan y caen en diferentes momentos
2 El cuadro transparente se mueve hacia arriba desde la parte inferior y el ancho. permanece sin cambios de principio a fin.
Después de que 3.4 cuadros lleguen a su destino, el texto comienza a aparecer. El texto en el cuadro azul se expande proporcionalmente + cambia de opaco a transparente, y el texto en el cuadro transparente cambia de opaco a transparente.
4. Icono de nube, acompañado de copos de nieve.
5.Aparece texto nevado.
En la capa de forma, los atributos que se pueden controlar incluyen proporción, posición, opacidad, trazo, etc. En la animación de este artículo, aprovechamos al máximo los cambios de estos atributos a lo largo del tiempo para crear efectos de animación.
Proceso de procesamiento
En primer lugar, recomendamos dos complementos de script, Easeandwizz y RepostionAnchorPoint
Uno es conveniente para crear curvas de movimiento y el otro es conveniente para establecer la posición del punto de anclaje.
Tres cuadros azules
Abra síntesis 1, seleccione los tres cuadros azules y configúrelos de la siguiente manera
Observaciones:
1. Los puntos de anclaje de los cuadros azules situados más a la izquierda y a la derecha están en la parte superior (configurados mediante el complemento AnchorPoint)
2. La escala es de 0 a 100%
3. Facilidad y wizz para seleccionar el fotograma clave. Es muy conveniente ajustar la curva de movimiento.
Marco transparente
El movimiento del marco transparente inicialmente movió la mayor parte del desplazamiento a una velocidad muy rápida, y luego disminuyó y se movió lentamente a la posición original. sigue
Nota: El efecto de movimiento de Quad+out en EaseandWizz es relativamente suave.
Texto inferior
Observaciones:
1. Tres cuadros azules Cuando el cuadro azul toca la parte inferior, el texto aparece rápidamente y la opacidad cambia de 0. ->100%, la proporción es de 0->100%
2. El texto en el cuadro transparente se mueve con el cuadro transparente (puede consultar el cuadro transparente para configurar la posición), pero el texto. El de la izquierda llega primero y el texto de la derecha llega primero. Llegará después de -4 grados en el lateral, preste atención a la configuración en la línea de tiempo.
Nubes
Cuando el texto en el cuadro transparente comienza a aparecer, aparecen nubes, primero con una transparencia que oscila entre 0-100%.
La proporción comienza en el 60%, y cuando la transparencia llega al 100%, pasa del 60% al 100%
Puntos de copo de nieve
Cuando las nubes se mueven Una vez completado el efecto, pequeños puntos de copos de nieve comienzan a aparecer uno por uno.
Observaciones:
1. Presta atención a los pequeños puntos que se moverán hacia la derecha al azar y luego rebotarán. Presta atención al ajuste de la secuencia de movimiento.
2. Esta vez también se recomienda utilizar Quad+Out
3. Tenga en cuenta que los puntos pequeños aparecen uno por uno, por lo que los cambios de transparencia deben establecerse secuencialmente en la línea de tiempo.
Efecto de texto Nevado
El movimiento de la máscara se utiliza aquí para crear el efecto de texto Nevado que aparece gradualmente. Tenga en cuenta que la opacidad de Nevado también debería cambiar (el cambio de opacidad de la máscara es redundante). . Por favor, no imite)
Efecto:
Enfoque del autor original:
Efecto:
Resultado:
3. Exportar
Método 1: AE+PS
1. Después de guardar, sintetice en AE>Agregar a la cola de renderizado
Después de completar la configuración, haga clic en Render
2 Abra el .mov renderizado con PS. (Archivo>Importar>Fotograma de vídeo a capa)
3.Cmd+Shift+S o Archivo>Guardar como formato disponible en la web
Nota:
1 Seleccione Siempre para la opción de bucle
2. El tamaño de la imagen se puede configurar
3 Preste atención a la elección del formato Gif
Método 2: LiceCap<. /p>
Si no desea utilizar PS, primero puede ajustar el tamaño del lienzo en AE y luego usar LiceCap, un pequeño software que puede grabar la pantalla en GIF. Es muy conveniente y se puede llamar. el mejor software de grabación GIF. (Versiones de múltiples plataformas)
Efecto de grabación:
CocoaChina es la comunidad china más grande del mundo para el desarrollo de Apple. El WeChat oficial publica periódicamente varios interesantes recursos y herramientas de tutoriales de I+D todos los días, presentando la aplicación. experiencia en promoción y marketing, la última información corporativa sobre contratación y subcontratación, así como los últimos desarrollos e información de capacitación sobre el motor Cocos2d y el kit de herramientas de desarrollo CocosStudio. Siga WeChat para conocer las últimas tendencias de productos y servicios por primera vez. ¡Con WeChat en la mano, tengo el mundo sobre cómo utilizar el pensamiento ppt para crear una página de animación h5 móvil!
¡Las herramientas de creación de páginas HTML5 pueden hacerlo! Se puede dividir aproximadamente en dos categorías: herramientas de sitios web y herramientas de aplicaciones móviles basadas en HTML5 (por supuesto, hay otras, como las basadas en cuentas públicas de WeChat, que se presentarán a continuación).
Primero que nada, déjame hablar sobre mis sentimientos personales en general
1. Herramienta de sitio web basada en HTML5: tiene funciones poderosas, gran operabilidad en una sola página y puede completarse. varios efectos de interacción de la página; pero a veces las operaciones pueden "fallar", como no cargar imágenes, no hacer clic en guardar, no generar, etc. Ya sabes el motivo~
2. APLICACIÓN de herramienta móvil: en comparación con los sitios web de herramientas, parece más conveniente. Hay una gran cantidad de plantillas para aplicar, lo que hace que su creación sea simple y rápida; a las plantillas existentes, lo que hará que una sola página no sea satisfactoria. Habrá un gran espacio maniobrable, lo que hará imposible lograr efectos interactivos de bricolaje.
Ampliamos cada herramienta utilizada
Herramienta web basada en HTML5:
Tu Zhan
Ventajas: Página Tiene un alto grado de bricolaje, y es fácil y conveniente implementar efectos dinámicos. Puede crear páginas H5 más arbitrarias.
Desventajas: el tamaño de la interfaz de la pantalla no se puede ajustar y las imágenes cargadas estarán desproporcionadas después de la generación, la página se estirará en la pantalla de cada tamaño.
(Esta imagen pretende ilustrar que el tamaño de la imagen cargada es el tamaño predeterminado del sitio web en sí, no el tamaño de la imagen en sí, lo que no favorece el ajuste del usuario)
Se puede editar específicamente. La operabilidad de una sola página es alta y hay dos modos de edición: principiante (con plantilla) y avanzado (sin plantilla). Tiene más efectos de cambio de página que Tuzhan y las plantillas también son más potentes. .
Revista Jugao Interactive
Ventajas: Una de las herramientas más simples y fáciles de usar. Sigue las indicaciones para agregarla paso a paso y finalmente generar una microrevista en 4. pasos. En comparación con otras herramientas en línea, es más estable.
Desventajas: Actualmente no he intentado crear el efecto interactivo en una sola página y no he encontrado la entrada para habilitar la función pro.
ANIMATRON
Ventajas: Al igual que la versión online de flash, es potente y puede crear animaciones HTML5. Es adecuado para personas con experiencia en animación para realizar presentaciones.
Desventajas: requiere producción de animación básica; largo tiempo de respuesta de la interfaz de trabajo parece que solo se puede compartir en twitter, Facebook, google+ y tumblr
iSpring7
El truco es PPT. La herramienta de conversión HTML5 es perfectamente compatible con PPT y puede producir material didáctico móvil HTML5.
Sin embargo, actualmente solo puedo abrir enlaces a sitios web conectándome a una VPN y usando Safari.
Producción del espectáculo
Ventajas: diseño sencillo, producción rápida y banda ancha estable.
Desventajas: No se adapta bien a la visualización de imágenes y texto en varias pantallas; no es posible editar y ajustar la posición del texto en la plantilla.
APLICACIÓN de herramienta móvil:
Primera página
Ventajas: alta calidad de plantilla, alta eficiencia al aplicar plantillas para edición, operación simple y rápida, efectos y experiencia en haciendo H5 Las herramientas de la aplicación en la página son excepcionales.
Desventajas: La operatividad de una sola página es baja y solo admite la aplicación de plantillas.
Invita y crea cartas de invitación rápidamente
Ventajas: fácil de usar, ahorra tiempo, es eficiente y conveniente para las estadísticas.
Desventajas: La página es sencilla y sólo puedes elegir la plantilla inherente para crear texto y añadir imágenes.
Gerente de marketing de escena móvil de Yiqixiu para pequeñas, medianas y microempresas
Ventajas: aplique plantillas, créelas rápidamente y utilícelas para realizar presentaciones de empresas y recomendaciones de productos. Tiene potentes estadísticas de promoción y funciones de gestión de clientes. Bueno, me gustaría estar aquí.
Desventajas: solo se pueden utilizar plantillas y el grado de bricolaje es bajo; es necesario confirmar aún más la precisión de los datos estadísticos. En la actualidad, parece que pueden faltar datos (a pequeña escala). pruebas, el número de estadísticas es menor de lo que debería ser) cantidad).
Publicación de WeChat: cree una página H5 a través de la cuenta oficial de WeChat
Ventajas: cree una página simple directamente en la cuenta oficial móvil, solo siga las instrucciones, es fácil y rápido sin pensar.
Resumen
Las páginas H5 creadas por el sitio web de la herramienta prestan más atención al esquema de interacción personalizado de páginas individuales, que es altamente DIY, lleva un tiempo relativamente largo y está sujeto a factores de ancho de banda afectan la operación;
Las páginas H5 creadas por la herramienta APP prestan más atención a la eficiencia y actualmente aplican plantillas. Por lo tanto, el grado de bricolaje para una sola página es bajo y el efecto interactivo es limitado.