Chet Haase & Romain Guy: U and I

Presented at 360|AnDev 2016

Transcript

1. Our Obsessions Romain Guy @romainguy Chet Haase @chethaase U and I
2. Agenda • Chet’s Obsession • Romain’s Obsession
3. Animation Rules Read this!
4. We Talked about this before Google I/O 2013 (YouTube)
5. And Before That... Devoxx 2009 (parleys.com)
6. Staging
7. Staging
8. Slow in/out Dem o! Linear Ease In/Out Mechanical Natural Sucky Better
9. Arc Dem o!
10. Arc - Example LayoutParams params = (LayoutParams) arcMotionButton.getLayoutParams();
 if (mTopLeft) {
 params.rightToRight = R.id.parentContainer;
 params.bottomToBottom = R.id.parentContainer;
 params.leftToLeft = -1;
 params.topToBottom = -1;
 } else {
 params.leftToLeft = R.id.parentContainer;
 params.topToBottom = R.id.trajectoryGroup;
 params.rightToRight = -1;
 params.bottomToBottom = -1;
 }
 arcMotionButton.setLayoutParams(params);
 mTopLeft = !mTopLeft; Step 1: Get the current position final float oldX = arcMotionButton.getX();
 final float oldY = arcMotionButton.getY(); Step 2: Reposition views
11. Arc - Example Step 3: Wait for layout final ViewTreeObserver observer = arcMotionButton.getViewTreeObserver();
 observer.addOnPreDrawListener(
 new ViewTreeObserver.OnPreDrawListener() {
 @Override
 public boolean onPreDraw() {
 observer.removeOnPreDrawListener(this); 
 // ...
 return true;
 }
 }
 ); final ViewTreeObserver observer = arcMotionButton.getViewTreeObserver();
 observer.addOnPreDrawListener(
 new ViewTreeObserver.OnPreDrawListener() {
 @Override
 public boolean onPreDraw() {
 observer.removeOnPreDrawListener(this);
 float deltaX = arcMotionButton.getX() - oldX;
 float deltaY = arcMotionButton.getY() - oldY;
 PropertyValuesHolder pvhX = PropertyValuesHolder.ofFloat("translationX", -deltaX, 0);
 PropertyValuesHolder pvhY = PropertyValuesHolder.ofFloat("translationY", -deltaY, 0);
 ObjectAnimator.ofPropertyValuesHolder(arcMotionButton,
 pvhX, pvhY).start();
 return true;
 }
 }
 );
 Step 3a: Animate from old to new location final ViewTreeObserver observer = arcMotionButton.getViewTreeObserver();
 observer.addOnPreDrawListener(
 new ViewTreeObserver.OnPreDrawListener() {
 @Override
 public boolean onPreDraw() {
 observer.removeOnPreDrawListener(this);
 Path path = new Path();
 path.moveTo(-deltaX, -deltaY);
 path.quadTo(-deltaX, 0, 0, 0);
 ObjectAnimator.ofFloat(arcMotionButton, "translationX", "translationY", path).start();
 return true;
 }
 }
 ); Step 3b: Make it curved!
12. Arc - Better Example LayoutParams params = (LayoutParams) arcMotionButton.getLayoutParams();
 if (mTopLeft) {
 params.rightToRight = R.id.parentContainer;
 params.bottomToBottom = R.id.parentContainer;
 params.leftToLeft = -1;
 params.topToBottom = -1;
 } else {
 params.leftToLeft = R.id.parentContainer;
 params.topToBottom = R.id.trajectoryGroup;
 params.rightToRight = -1;
 params.bottomToBottom = -1;
 }
 arcMotionButton.setLayoutParams(params);
 mTopLeft = !mTopLeft; Step 1: Reposition views Step 2: Run a transition TransitionManager.beginDelayedTransition(parentContainer); ChangeBounds arcTransition = new ChangeBounds();
 arcTransition.setPathMotion(new ArcMotion());
 TransitionManager.beginDelayedTransition(parentContainer, arcTransition); Step 2: Make it curved!
13. Secondary Motion
14. Secondary Motion
15. Timing
16. Solid drawing
17. Other Cartoon Animation Rules Antici Straight ahead and pose-to-pose Follow-through and pation Squash & Stretch Exagggggggggggggggggggggggggggggggggggggggeration overlap Appeal
18. let’s talk about… COLORS
19. Color Spaces Gamma & Linear
20. Gamma & Linear
21. You are doing it wrong —— — — — — — —— —
23. A CRT uses an electron gun fired at a phosphorescent screen
25. Gamma 2.2
26. Gamma 2.2 Gamma Correction
27. what about LCD? >>>>>>>>>>>>> <<<<<<<<<<<<<
29. Our visual system follows Steven’s power law The eye’s response is non-linear Gamma! Subjective magnitude of sensation Magnitude of stimulus
31. The response curve of an LCD is not a gamma curve It is made to look like a gamma curve with hardware processing
32. We gamma-encode to optimize bandwidth and storage It is a compression scheme
33. Linear Gamma Input quantized over 5 bits for visualization 50% of the precision allocated to the darkest 50% intensities 70% of the precision allocated to the darkest 50% intensities 11~12 bits needed 8 bits are sufficient
34. Gamma encoding is not necessary with high precision, linear formats Examples: OpenEXR, PNG 16 bit, Photoshop 16 & 32 bit, RAW files
37. findViewById(R.id.root).setBackground(0xfff32272); Gamma encoded
38. a=0 b=1 c=0.21 c=0.5
40. >>>>>>>>>>>>>>linear space<<<<<<<<<<<<<< Do all the math in
41. // Gamma encoded colors
 int color1 = getColor1();
 int color2 = getColor2();
 
 // Extract red and convert to linear
 float r1 = ((color2 >> 16) & 0xff) / 255.0f;
 r1 = (float) Math.pow(r1, 2.2); float r2 = // …
 
 // Do the math and gamma-encode
 float r = r1 * 0.5f + r2 * 0.5f;
 r = (float) Math.pow(r, 1.0 / 2.2);
42. // Do not gamma-decode alpha // Alpha is *linear*! // Make sure the Gray profile // is set to “sGray” in // Photoshop’s color settings
43. // OpenGL has extensions and APIs // for sRGB encoding/decoding and // correct, linear blending // Use them, it’s free
44. Blurs & resizes → darker image Animations → brightness shifts 3D lighting → hue shifts This issue affects everything
46. Color Spaces It’s more complicated
47. What is a color? For users, it’s a visual perception that can be described by hue, brightness and colorfulness For developers, it’s a tuple of numbers, in a color model associated with a color space RGB(0.92,0.91,0.86) CMYK(0.5,0.3,0.6,0)
48. Visible Spectrum CIE 1931 Chromaticity Diagram
49. sRGB AdobeRGB ProPhotoRGB Common RGB color spaces
50. It has 3 primaries It has a white point It has conversion functions What is a color space?
51. sRGB AdobeRGB ProPhotoRGB Common RGB color spaces
52. The primaries do not represent a surface but a solid in CIE xyY This is sRGB ͢
53. Equivalent of the gamma functions Opto-electronic conversion function (OECF) Electro-optical conversion function (EOCF) Conversion functions
54. Which color space? Unless you know otherwise, always assume sRGB
55. sRGB
56. sRGB
57. float OECF_sRGB(float linear) {
 float low = linear * 12.92f;
 float high = (pow(linear, 1.0f / 2.4f) * 1.055f) - 0.055f;
 return linear <= 0.0031308f ? low : high;
 }
58. Easy to optimize Use lookup tables, 8 bits for encoding, 16 bits for decoding
59. OECF
60. HDTV, Rec.709 →Same primaries & white point as sRGB →Different OECF/EOCF, ≈gamma 2.4 UHDTV, Rec.2020 →Similar OECF/EOCF to Rec.709 Android TV
63. You are doing it wrong —— — — — — — —— —
64. Android is doing it wrong
65. Gradients Animations (fixed in N) Bitmap resize Blending Anti-aliasing Etc…
66. Let’s recap sRGB input EOCF Linear input Processing OECF Display Color pipeline
67. Questions