{"id":1376,"date":"2019-09-23T23:42:02","date_gmt":"2019-09-23T15:42:02","guid":{"rendered":"https:\/\/www.develop-note.com\/blog\/?p=1376"},"modified":"2022-02-17T14:57:40","modified_gmt":"2022-02-17T06:57:40","slug":"2020ironman-svelte-motion-spring","status":"publish","type":"post","link":"https:\/\/www.develop-note.com\/blog\/2019\/09\/23\/2020ironman-svelte-motion-spring\/","title":{"rendered":"\u7b2c\u5341\u4e00\u5c46\u9435\u4eba\u8cfd \u524d\u7aef\u5de5\u7a0b\u5e2b\u7684\u53e6\u4e00\u500b\u9078\u64c7 svelte DAY22- \u52d5\u614b spring"},"content":{"rendered":"

motion spring<\/h1>\n

motion spring \u662fsvelte motion\u7684\u53e6\u4e00\u500b\u5de5\u5177\uff0c\u5b83\u7684\u5167\u5bb9\u8ddfmotion tweened<\/a>\u5f88\u985e\u4f3c\uff0c\u7c21\u55ae\u8b1b\u5c31\u662f\u5728\u8655\u7406\u5f71\u683c\u52d5\u756b\u7684\u5167\u63d2\u65b9\u6cd5\uff0c\u5c0d\u65bctweened\u800c\u8a00\u52d5\u614b\u8f03\u70ba\u76f4\u7dda\u7684\uff0c\u5c0d\u65bcspring\u800c\u8a00\u52d5\u614b\u8f03\u70ba\u66f2\u7dda\u3002<\/p>\n

motion spring \u7684\u7528\u9014<\/h2>\n

\u5927\u5bb6\u61c9\u8a72\u6703\u554f\u751a\u9ebc\u6642\u5019\u8981\u7528motion tweened<\/a>\u800c\u751a\u9ebc\u6642\u5019\u8981\u7528motion spring\uff0c\u7b46\u8005\u8a8d\u70ba\u770b\u8d77\u4f86\u8212\u670d\u6bd4\u8f03\u91cd\u8981\uff0c\u4f8b\u5982\u6628\u5929\u5206\u4eab\u7684tweened\u7528\u5728progress bar\u4e0a\u9762\uff0c\u90a3spring\u8981\u7528\u5728\u54ea\u88e1\u5462?\u4eca\u5929\u5c31\u4f86\u5206\u4eab\u4e00\u4e0bspring\u7684\u7528\u9014\u8ddf\u5be6\u4f5c\u3002<\/p>\n

motion spring \u7684\u5be6\u4f5c<\/h2>\n

\u4eca\u5929\u4f86\u8ddf\u5927\u5bb6\u5206\u4eab\u4e00\u4e0b\u8ecc\u8de1\u7403\u7684\u5be6\u4f5c\uff0c\u9996\u5148\u5148\u4f86\u770b\u4e00\u4e0b\u4e0b\u9762\u7684\u4f8b\u5b50\u3002<\/p>\n

<script>\n    import { writable } from 'svelte\/store';\n\n    let coords = writable({ x: 50, y: 50 });\n    let size = writable(10);\n<\/script>\n\n<style>\n    svg { width: 100%; height: 100%; margin: -8px; }\n    circle { fill: #ff3e00 }\n<\/style>\n\n<div style="position: absolute; right: 1em;">\n    <label>\n        <h3>stiffness ({coords.stiffness})<\/h3>\n        <input bind:value={coords.stiffness} type="range" min="0" max="1" step="0.01">\n    <\/label>\n\n    <label>\n        <h3>damping ({coords.damping})<\/h3>\n        <input bind:value={coords.damping} type="range" min="0" max="1" step="0.01">\n    <\/label>\n<\/div>\n\n<svg\n    on:mousemove="{e => coords.set({ x: e.clientX, y: e.clientY })}"\n    on:mousedown="{() => size.set(30)}"\n    on:mouseup="{() => size.set(10)}"\n>\n    <circle cx={$coords.x} cy={$coords.y} r={$size}\/>\n<\/svg><\/code><\/pre>\n
\u9019\u500b\u4f8b\u5b50\u7528writable store<\/a>\u5be6\u4f5c\uff0c\u5927\u5bb6\u53ef\u4ee5\u9ad4\u9a57\u770b\u770b\u76ee\u524d\u7684\u52d5\u614b\uff0c\u63a5\u4e0b\u4f86\u6211\u5011\u53ef\u4ee5\u8a66\u8a66\u770btweened\u7684\u65b9\u5f0f\u4f86\u5be6\u4f5c\uff0c\u5927\u5bb6\u53ef\u4ee5\u770b\u770b\u4ee5\u4e0b\u7684\u4fee\u6539\u3002<\/p>\n
<script>\n    import { tweened } from 'svelte\/motion';\n\n    let coords = tweened({ x: 50, y: 50 });\n    let size = tweened(10);\n<\/script><\/code><\/pre>\n
\u5982\u679c\u7528motion tweened<\/a>\u5be6\u4f5c\u662f\u4e0d\u662f\u52d5\u614b\u6bd4\u8f03\u5e73\u6ed1\u4e00\u9ede\u5462\u3002\u63a5\u4e0b\u4f86\u662f\u793a\u7bc4\u4e00\u4e0b\u7528spring\u4f86\u5be6\u4f5c\uff0c\u5927\u5bb6\u53ef\u4ee5\u770b\u770b\u4ee5\u4e0b\u7684\u4fee\u6539\u3002<\/p>\n
<script>\n    import { spring } from 'svelte\/motion';\n\n    let coords = spring({ x: 50, y: 50 });\n    let size = spring(10);\n<\/script><\/code><\/pre>\n
\u5927\u5bb6\u53ef\u4ee5\u8ddf\u4e0a\u9762\u5169\u500b\u4f8b\u5b50\u6bd4\u7167\u4e00\u4e0b\uff0c\u662f\u4e0d\u662f\u7528spring\u7684\u52d5\u614b\u66f4\u5e73\u9806\u4e00\u9ede\u3002<\/p>\n
\u5c0f\u7d50<\/h2>\n
\u4eca\u5929\u8ddf\u5927\u5bb6\u5206\u4eabsvelte motion\u7684\u7b2c\u4e8c\u500b\u90e8\u5206spring\u65b9\u5f0f\u7684\u904b\u52d5\uff0c\u5e0c\u671b\u5927\u5bb6\u6703\u559c\u6b61<\/p>\n","protected":false},"excerpt":{"rendered":"
motion spring motion spring \u662fsvelte motion\u7684\u53e6\u4e00\u500b\u5de5\u5177\uff0c\u5b83\u7684\u5167\u5bb9\u8ddfm … <\/p>\n
\u95b1\u8b80\u5168\u6587\u3008\u7b2c\u5341\u4e00\u5c46\u9435\u4eba\u8cfd \u524d\u7aef\u5de5\u7a0b\u5e2b\u7684\u53e6\u4e00\u500b\u9078\u64c7 svelte DAY22- \u52d5\u614b spring\u3009<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[2],"tags":[160,79],"class_list":["post-1376","post","type-post","status-publish","format-standard","hentry","category-develop","tag-2019ironman","tag-svelte"],"_links":{"self":[{"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/posts\/1376","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/comments?post=1376"}],"version-history":[{"count":5,"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/posts\/1376\/revisions"}],"predecessor-version":[{"id":2992,"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/posts\/1376\/revisions\/2992"}],"wp:attachment":[{"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/media?parent=1376"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/categories?post=1376"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/tags?post=1376"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}