WhatsApp testa novo visual moderno para as chamadas de voz

Depois de lançar algumas novidades para quem utiliza a versão web do aplicativo, o WhatsApp decidiu dar uma repaginada na interface de usuário para chamadas de voz,

[{"selector":"#anim-21d92c45-a0cf-4b0c-9f4a-01ae506841cf","keyframes":[{"offset":0,"transform":"translate3d(0, -213.72892%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.29,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.45,"transform":"translate3d(0, -60.100572303999996%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.61,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.71,"transform":"translate3d(0, -20.432484752%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.8,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.85,"transform":"translate3d(0, -7.672868228%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.92,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.96,"transform":"translate3d(0, -3.3341711519999997%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":1,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"}],"delay":0,"duration":1600,"fill":"both"}] [{"selector":"#anim-ad997d92-e0d6-42e7-81ca-5e833bdfae42","keyframes":[{"transform":"rotate(-540deg) scale(0.1)","opacity":0},{"transform":"none","opacity":1}],"delay":0,"duration":1000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both","iterations":1}]

Novidades visuais nas chamadas de voz no WhatsApp Na captura de tela, é possível observar um quadrado cinza arredondado com a foto de perfil do seu contato,

[{"selector":"#anim-c4b82112-06b1-4658-ad4c-f42b20c54c8f","keyframes":{"transform":["translate3d(134.13655%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-0e9575a4-27fa-46d3-a929-73f7b8895f88","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d1b04fa8-251a-4cf3-8cf3-1b934da5a1d3","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-f228d536-8d17-4334-b9e6-c8de0426b1bb","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}]

. Durante as chamadas, será exibido o efeito de onda de voz para o participante que estiver falando na conversa.

[{"selector":"#anim-3a54bb6b-b414-4f9c-8add-3de9fff5ab39","keyframes":{"opacity":[1,1]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-a8c57b75-4d8c-4029-af77-df68748a2a43","keyframes":{"transform":["scale(3)","scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-cea85b80-b15a-4a42-8c2b-44420307acb3","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c8547d1d-5970-43d7-8f14-c57a28626774","keyframes":{"transform":["translate3d(104.11255%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Outra novidade é a possibilidade de alterar a imagem de fundo das chamadas de voz

[{"selector":"#anim-e12b1331-04b4-4c1e-aff7-ebf8dd5d9cd7","keyframes":{"transform":["translate3d(132.93174%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-1d377cf2-8b41-4574-bf4e-530c24a3242e","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-2e000a76-31cd-4d6b-97d8-20e412767289","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-2d4b6ec5-e7e1-4e86-99a5-7525627d35b4","keyframes":[{"offset":0,"transform":"translate3d(0, -201.03361%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.29,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.45,"transform":"translate3d(0, -56.530651132%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.61,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.71,"transform":"translate3d(0, -19.218813116000003%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.8,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.85,"transform":"translate3d(0, -7.217106599000001%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.92,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.96,"transform":"translate3d(0, -3.136124316%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":1,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"}],"delay":0,"duration":1600,"fill":"both"}]

embora o recurso esteja apenas listado, mas ainda não funcione. É possível que, no futuro, essa opção de personalização seja introduzida ou, pelo menos,

[{"selector":"#anim-5c1fe607-71e2-488e-a977-66e29e5fa0ef","keyframes":{"transform":["translate3d(133.33333%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-543f2ee0-23aa-46de-a5ae-f20347b8e333","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-94683ce3-f15b-4c2a-b5e7-3195e5eea516","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-847802cf-e26d-4a20-8697-fabbfdf762df","keyframes":{"transform":["translate3d(120.66668%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":1000,"easing":"cubic-bezier(.2, 0, .8, 1)","fill":"both"}] [{"selector":"#anim-734f24bd-9005-47db-911b-96bfbbfcc756","keyframes":{"transform":["rotateZ(180deg)","rotateZ(0deg)"]},"delay":0,"duration":1000,"easing":"cubic-bezier(.2, 0, .5, 1)","fill":"forwards"}]