Let's see what implementing
instructive motion might look like.
In this example, we have a full bleed
image and some content below it.
There's a tension here,
we want to show the image in full, but
we also want to indicate that
there's more text available.
And perhaps, we want to show some of
that text content right away too.
What we can do is start off with
the image fully visible, but
then immediately slide up some of the
text to indicate there's more content.
Let's see how we can implement
this pretty simple form
of instructive motion.
Let's start with the layout.
Nothing fancy here, just a frame
layout with a fixed height image, and
a scroll view in front of it.
The linear layout in the scroll view
will contain our text content, and
have a white background.
We'll give the linear layout
a little elevation to make it clear
that it's a distinct surface.
Now, at the default scroll position,
you see the full image,
but very little text content.
All we need to do is
animate the scroll position
as the screen first opens to a position
that shows more of the text content.
Here we're using an ObjectAnimator
to animate the scrollY property
of the ScrollView.
We could just use the ScrollView's
smoothScrollTo method, but
this gives you a bit more
control over that animation.
We start the animation inside of
onEnterAnimationComplete to ensure that
the window transition ends first
before we start the animation.
This is only available in
Android 5.0 and later, but
you could fake it on earlier versions
using something like a start delay.
The effect is that you get a quick
preview of the image before you start
reading about it.
And you quickly realize you could
quickly scroll up to see that
image in full again or
down to read more.
دعونا نرى كيف تكون الحركة
.البناءة للتنفيذ
لدينا في هذا المثال صورة
.كاملة الهوامش مع بعض المحتوى أدناها
،هناك قدر من التوتر هنا
حيث إننا نريد عرض الصورة كاملة، ولكننا
نرغب أيضًا في الإشارة إلى
.وجود المزيد من النص المتاح
وربما نرغب في عرض قدر
.من هذا النص مباشرة أيضًا
وما يمكننا فعله هنا هو البداية بجعل
الصورة مرئية بالكامل، ولكن
ننتقل مباشرة إلى جزء من
.النص للإشارة إلى وجود المزيد من المحتوى
دعونا نرى كيف يمكننا تنفيذ
هذا الشكل البسيط
.للحركة البناءة
.هيا نبدأ أولاً بالتخطيط
لا يوجد الكثير هنا، فقط مجرد تخطيط
إطار مع صورة بارتفاع ثابت، و
.عرض مع التمرير أمامها
وسيحتوي التخطيط الخطي في العرض مع التمرير
على محتوى النص، وذلك مع
.خلفية بيضاء
سنمنح التخطيط الخطي
ارتفاعًا ضئيلاً لكي نجعل من الواضح
.بأن لديه سطحًا مميزًا
،الآن سترون، في موقع التمرير الافتراضي
,الصورة بالكامل
.مع قدر ضئيل من محتوى النص
وكل ما نحتاج إلى القيام به هو
،تحريك موضع التمرير
بحيث تفتح الشاشة في موقع
.يعرض المزيد من محتوى النص
ونحن نستخدم هنا ObjectAnimator
لتحريك التمرير بسبب خاصية
.ScrollView
ويمكننا فقط استخدام التمرير السلس ScrollView
للأسلوب، ولكن
هذا يمنحكم المزيد من
.التحكم في التحريك
لقد بدأنا التحريك داخل
onEnterAnimationComplete للتأكد من انتهاء
انتقال النافذة أولاً قبل
.بدء التحريك
وهذا متاح فقط في إصدار
Android 5.0 أو الأحدث منه، ولكن يمكنكم
تزييفها في الإصدارات الأقدم
.باستخدام شيء مثل تأخير التشغيل
ويؤدي هذا إلى الحصول على
معاينة سريعة للصورة قبل بدء
.القراءة حولها
وستدركون سريعًا أن بوسعكم
التمرير السريع لأعلى لمشاهدة
الصورة كاملة مرة ثانية أو
.لأسفل لقراءة المزيد
Vamos a ver lo que la implementación de
movimiento instructivo podría ser similar.
En este ejemplo, tenemos un corrimiento
Hay una tensión aquí,
queremos mostrar la imagen en su totalidad
también queremos indicar que
hay más texto disponible.
Y tal vez, queremos mostrar algunos de
que el contenido de texto de inmediato
Lo que podemos hacer es empezar con
la imagen completamente visible, pero
luego deslice de inmediato algunos de los
texto para indicar que hay más contenido.
Vamos a ver cómo podemos implementar
esta forma bastante simple
de movimiento instructivo.
Vamos a empezar con el diseño.
Nada de lujos, sólo un marco
diseño una imagen de altura fija con y
una vista de desplazamiento en
La disposición lineal en la vista de
tener un fondo blanco.
Le daremos el diseño lineal
un poco de elevación para que quede clar
que es una superficie distinta.
Ahora, en la posición de desplazamiento
pero muy poco el contenido del texto.
Todo lo que necesitamos hacer es
animar la posición de desplazamient
como la pantalla primero se abre a una
Aquí estamos usando un ObjectAnimator
para animar la propiedad Scrolly
del ScrollView.
Podríamos simplemente utilizar el ScrollVi
esto le da un poco más
el control de que la animación.
Empezamos la animación dentro de
OnEnter AnimationComplete para asegurar qu
la transición ventana termina primero
antes de empezar la animación.
Sólo está disponible en
Android 5.0 y versiones posteriores, pero
usted podría fingir en versiones anteriore
El efecto es que se obtiene una rápida
vista previa de la imagen antes de empe
leer sobre él.
Y te das cuenta de la rapidez con que podí
imagen en su totalidad de nuevo o
hacia abajo para leer más.
유익한 도구 모션이 어떻게 보이는지 확인해 봅시다.
이번 예시에서는 저희는 꽉 차있는 화면에 있는 내용을 보려고 합니다.
시각적인 긴장감이 느껴지군요 저희는 이미지가 전체화면으로 보이게 하고 싶지만
그 부분에 더 많은 텍스트가 보이도록 하고 싶기도 합니다.
어쩌면 저희가 그 텍스트 내용을 바로 보여주고 싶을지도 모르죠.
저희가 할 수 있는건 이미지가 크게 보이도록 하는 방법밖엔 없지만
그러면 바로 본문이 올라와서 내용이 더 많이 있다는것을 알려주게 되죠.
이런 간단한 형식을 어떻게 구현했는지 봅시다.
유용한 모션에서 말이죠.
먼저 레이아웃과 함께 시작하게 됩니다.
이미지의 고정된 크기를 지정한 기본 틀 레이아웃 외에는 특별한게 없습니다.
그리고 스크롤 뷰 가 있네요.
선형 방식의 스크롤 뷰는 본문에 포함이 될 것이고
배경은 흰색이 되겠네요.
저희는 더 깔끔하게 보이기 위해 선형 레이아웃의 높이를 약간 더 높였습니다.
그 부분을 독특하게 만들기 위해서죠.
이제, 기본 스크롤 위치에서 여러분은 전체 이미지를 볼 수 있습니다.
하지만 본문 내용은 너무나 적죠.
이 문제를 해결하려면 스크롤 위치에 동적인 부분을 추가해야 하죠.
첫 화면이 열리게 되고 그 화면은 더 많은 내용을 보이게 될 것입니다.
이 부분에선 스크롤 뷰 에서 scrollY 를 움직이게 하고자
ObjectAnimator를 사용 했네요.
저희는 ScrollView 에 있는 smoothScrollTo 기능을 사용할 수 있었지만
이 방법은 여러분들이 스크롤 애니메이션을 보다 효과적으로 다룰 수 있도록 합니다.
저희는 그 부분을 onEnterAnimationComplete 의 내부에서 시작하도록 했습니다.
애니메이션을 시작하기 전에 화면 전환이 먼저 끝나도록 하기 위해서요.
이 기술은 안드로이드 버전 5.0이거나 이후의 버전에서만 사용 가능하지만
여러분들은 이전 버전에서도 시작 딜레이를 넣음으로써 비슷하게 구현할 수 있습니다.
이 방법의 효과는 여러분들이 이미지의 프리뷰를 볼 수 있다는 겁니다.
그 내용을 읽기도 전인데 말이죠.
그리고 여러분들은 아마도 깨닫게 될 것 입니다.
내용을 더 읽거나 전체 이미지를 보기 위해선 스크롤을 빠르게 올려야 한다는 사실을 말이죠.
Vejamos como é a implementação
de movimento instrutivo.
Neste exemplo, temos uma
imagem sem margens
e um conteúdo abaixo dela.
Há uma tensão aqui.
Queremos mostrar a imagem completa,
mas também indicar que
há mais texto disponível.
Podemos querer mostrar também
um pouco do conteúdo
imediatamente.
Podemos começar com
toda a imagem visível
e depois deslizar imediatamente
um pouco do texto para indicar
que há mais conteúdo.
Vejamos como implementar
esta ótima e simples forma
de movimento instrutivo.
Vamos começar com layout.
Nada sofisticado aqui, apenas o layout
da estrutura com uma imagem de altura fixa
e uma scroll view na frente dela.
O layout linear
na scroll view
conterá o texto e
um plano de fundo branco.
Daremos ao layout linear uma
pequena elevação para tornar claro
que é uma superfície distinta.
Na posição de rolagem padrão,
vê-se a imagem completa,
mas pouco conteúdo de texto.
Precisamos animar a
posição de rolagem
porque a tela abre-se primeiro
para a posição que mostra
mais do conteúdo do texto.
Aqui usamos um ObjectAnimator
para animar a propriedade scrollY
da scroll view.
Podemos usar o método smoothScrollTo
da scroll view,
mas isso nos dá mais controle
sobre a animação.
Começamos a animação dentro do
onEnterAnimationComplete
para garantir que
a transição de janela
termine primeiro, antes de começar
a animação.
Isto só está disponível no
Android 5.0 e posterior,
mas pode ser simulado
em versões anteriores
com um atraso de início.
Obtém-se uma visualização da
imagem
antes de iniciar a leitura do texto.
Rapidamente você percebe
que pode rolar para cima
e ver a imagem completa novamente
ou para baixo e ler o texto.
让我们来看看如何实现启发性动作。
在这个例子中,
我们有一张“全出血”图像和它下方的内容。
这里有一个矛盾点,
我们既希望完全显示图像,
又希望告诉用户还有更多文本可读。
也许我们希望立即向用户展现部分内容。
我们能做的就是完全显示图像,
然后立即向上滑入部分文本,
用来暗示更多文本的存在。
让我们来看看如何实现这一简单的
启发性动作。
让我们从布局开始。
这只是一个帧布局,有一张高度固定的图像,
和它前方的一个滚动视图。
滚动视图中的线性布局包含我们的文本内容,
而且具有纯白的背景。
我们将线性布局抬高一点,
使它这个不同其他的平面
更明显一些。
现在,在默认的滚动位置上,
您可以看到整个图像和少量的文本内容。
我们要做的就是,
当屏幕最先打开至显示
更多文本内容的位置时,
将滚动位置做成动画。
我们使用 ObjectAnimator 将
ScrollView 的 scrollY 制作成动画。
我们可以将 ScrollView 的平滑滚动用于 Method,
使您能够更多地控制动画。
我们在 onEnterAnimationComplete 内部开启动画,
以确保我们在开启动画前窗口过渡已经结束。
这只在 Android 5.0 及之后的版本中可用,
不过您可以在早期的版本中进行伪造,
只要使用启动延时即可。
最终的效果是,您在开始阅读之前
就已经快速浏览了图像。
您很快就知道是要快速向上滑动看图像,
还是向下滑动看内容。