Question

我目前正在使用animateTransform

制作动画

<animateTransform xmlns="http://www.w3.org/2000/svg" attributeName="transform" type="scale" additive="sum" begin="mouseenter" from="1" to="1.2" dur="1" />

到目前为止，这种方法很有效，但缺少一件事，我想创建一个平滑的动画，所以开始应该匹配端点。不幸的是，我无法找到设置多个关键帧的方法。

在css中它看起来像这样

@keyframe foo {
  0%{
    transform: scale(1);
  }
  50%{
    transform: scale(1.2);
  }
  100%{
    transform: scale(1);
  }
}

任何想法如何在svg / animateTransform标签中创建这样的动画？

Answer 1

在SMIL语法中，CSS关键帧语法的对应部分是使用包含以分号分隔的列表的this和values属性：

from

使用to / values和keyTime是相互排斥的。

两个列表必须具有完全相同的项目数。 #include <stdio.h> #include <SDL.h> #include <SDL_image.h> #define IMAGE_WIDTH 1024 #define IMAGE_HEIGHT 768 int main(int argc, char **argv) { (void)argc, (void)argv; int quit = 0; SDL_Init(SDL_INIT_EVERYTHING); SDL_Window *window = NULL; window = SDL_CreateWindow("WarmingUp", SDL_WINDOWPOS_UNDEFINED, SDL_WINDOWPOS_UNDEFINED, IMAGE_WIDTH, IMAGE_HEIGHT, 0); if(window == NULL){ printf("Erro a abrir janela gráfica\n"); exit(EXIT_FAILURE); } SDL_Renderer *renderer = NULL; renderer = SDL_CreateRenderer(window, -1, SDL_RENDERER_ACCELERATED); if (renderer == NULL){ printf("Erro a criar renderer\n"); exit(EXIT_FAILURE); } SDL_Surface *jpgSurface = NULL; jpgSurface = IMG_Load("map.jpg"); if(jpgSurface == NULL){ printf("Erro a abrir imagem\n"); exit(EXIT_FAILURE); } SDL_Texture *jpgTexture = NULL; jpgTexture = SDL_CreateTextureFromSurface(renderer, jpgSurface); if(jpgTexture == NULL){ printf("Erro a criar superfície através de imagem\n"); exit(EXIT_FAILURE); } SDL_FreeSurface(jpgSurface); SDL_Event e; // rectangle to upscale in second window const SDL_Rect srcrect = {600, 500, 250, 250}; SDL_Window *second_window = NULL; SDL_Renderer *second_renderer = NULL; SDL_Texture *magnified_fragment_texture = NULL; while(!quit){ while(SDL_PollEvent(&e)){ if(e.type == SDL_QUIT || (e.type == SDL_KEYDOWN && e.key.keysym.sym == SDLK_ESCAPE)) { quit = 1; } else if(e.type == SDL_KEYDOWN && e.key.keysym.sym == SDLK_t && !second_window) { // create empty surface of adequate size SDL_Surface *const surf = SDL_CreateRGBSurface(0, srcrect.w, srcrect.h, 32, 0xff000000, 0xff0000, 0xff00, 0xff); SDL_FillRect(surf, NULL, 0); // copy pixels SDL_RenderReadPixels(renderer, &srcrect, SDL_PIXELFORMAT_RGBA8888, surf->pixels, surf->pitch); // error checking should be done... second_window = SDL_CreateWindow("mag", SDL_WINDOWPOS_UNDEFINED, SDL_WINDOWPOS_UNDEFINED, srcrect.w*2, srcrect.h*2, 0); second_renderer = SDL_CreateRenderer(second_window, -1, SDL_RENDERER_ACCELERATED); magnified_fragment_texture = SDL_CreateTextureFromSurface(second_renderer, surf); SDL_FreeSurface(surf); } } SDL_RenderClear(renderer); SDL_RenderCopy(renderer, jpgTexture, NULL, NULL); SDL_RenderPresent(renderer); if(second_renderer) { const SDL_Rect dstrect = {0, 0, srcrect.w*2, srcrect.h*2}; SDL_RenderClear(second_renderer); // RenderCopy scales texture to destination rect SDL_RenderCopy(second_renderer, magnified_fragment_texture, NULL, &dstrect); SDL_RenderPresent(second_renderer); } SDL_Delay(15); } SDL_DestroyTexture(jpgTexture); SDL_DestroyRenderer(renderer); SDL_DestroyWindow(window); SDL_Quit(); return 0; }值是0到1之间的浮点值，表示持续时间的比例。每个连续时间必须大于或等于前一个时间值。对于连续动画，第一个时间值必须为0，最后一个值必须为。

在smil animateTransform中设置关键帧动画

1 个答案: