Показать png изображение постепенно с крышкой SVG - PullRequest
Новая
       6

Показать png изображение постепенно с крышкой SVG

0 голосов
/ 06 июня 2018

Я хочу показать изображение PNG (в форме круга) с анимацией.При запуске изображение не будет отображаться, но будет отображаться с эффектом «по часовой стрелке: блокировка».

Моя идея - это обложка SVG с желаемым эффектом, например, от красной до прозрачной заливки.Возможно ли это?

Есть идеи?

Спасибо.

Ответы [ 2 ]

0 голосов
/ 07 июня 2018

Вот один простой способ.Это просто ромбовидная форма, больше чем изображение, точки которой я медленно сжимаю вместе, как закрывающий веер.

Из-за ромбовидной формы у него нет постоянной скорости развертки.Но если вы используете короткую анимацию, вы не заметите.Если вы хотите сделать скорость более стабильной, вы можете добавить больше очков.Например, используйте восьмиугольник, а не бриллиант. 

<svg width="400" height="400" viewBox="0 0 400 400">

  <image href="https://i.imgur.com/pHSdFlP.jpg" width="400" height="400"/>
  <polygon points="200,-200, 600,200, 200,600, -200,200" fill="red">
    <animate attributeName="points"
             attributeType="XML"
             dur="1s"
             values="200,-200, 600,200, 200,600, -200,200, 200,-200, 200,200;
                     600,200, 600,200, 200,600, -200,200, 200,-200, 200,200;
                     200,600, 200,600, 200,600, -200,200, 200,-200, 200,200;
                     -200,200, -200,200, -200,200, -200,200, 200,-200, 200,200;
                     200,-200, 200,-200, 200,-200, 200,-200, 200,-200, 200,200"
             fill="freeze"/>
  </polygon>

</svg>
0 голосов
/ 06 июня 2018

Использование <animateTransform>: 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
  <script src="main.js"></script>
</head>
<body>
  <svg width=272 height=92 
  xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink">       
    <image xlink:href="./google.png" height="100%" width="100%"/>
    <rect x="0" y="0" width="272" height="90" fill="#FFF">
        <animateTransform attributeName="transform"
                          attributeType="XML"
                          additive="sum"
                          type="scale"
                          from="1 1"
                          to="0 0"
                          dur="2s"
                          fill="freeze"/>
    </rect>
  </svg>

</body>
</html>
...